Get the Data of Uploaded File in JavaScript

get the data of uploaded file in javascript

you can use the new HTML 5 file api to read file contents

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

but this won't work on every browser so you probably need a server side fallback.

Extract data from uploaded file without submittng the file in JavaScript?

Here is the example of how to access a file's content.

function handleFileSelect(evt) {
  var files = evt.target.files;

  var f = files[0];

  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      // Do everything what you need with the file's content(e.target.result)
      console.log(e.target.result);
    };
  })(f);

  reader.readAsText(f);
}

document
  .getElementById("upload")
  .addEventListener("change", handleFileSelect, false);

How to get file name from the uploaded file using javascript?

File inputs have a files property that can be interrogated to obtain the file name, MIME type, and size (in bytes).

Each item in the files list is a File, which is an object (not a string) that has a .name property.

For more info, see Getting information on selected files from MDN.

In React, you can get this information from the event argument that is provided to the onChange handler. I think that's generally better than using a ref, because it mirrors the pattern you'd use with other kinds of inputs.

---

I think the reason your code is failing is because you're not managing your data well.

I think you want something like this:

let [ filename, setFilename ] = React.useState<string>('')

function onChangeFile( event: React.ChangeEvent<HTMLInputElement> ): boolean {
    if(event.files && event.files.length) {
        setFilename(event.files[0].name)
    }
    return true
}

<FormField
     label="file"
     fieldId={`${fieldRoot}.kubeConfig`}
>
    {({form}: FieldProps) => (
        <>
            <input 
                type="text"
                value={filename}
            /> 
            <input
                type="file"
                style={{display: 'none'}}
                accept=".pem"
                ref={inputRef}
                onChange={onChangeFile}
            />
            <button onClick={handleUploadClick}> Upload </button>
        </>
    )}
</FormField>

A few things to note:

• we don't need two functions for this (one to store and one to retrieve), we only need one change handler
• we use regular React state to hold onto the filename, instead of whatever you're doing with lodash get
• this does not use the form.setFieldValue; I don't see the implementation of <FormField> here, so there's no way for us to know how to use it properly
• I don't see the implementation of handleUploadClick, so I'm assuming that all it does is fire a click event on the hidden file input (which is pretty common)

---

Also, you should never define DOM event handlers as async. DOM event handlers do not understand Promises. A DOM event handler must return a boolean, not a boolean inside a Promise, if you want the page to react properly.

Preview an image before it is uploaded

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

How to access data of uploaded JSON file?

You will need an HTML5 browser, but this is possible.

(function(){        function onChange(event) {        var reader = new FileReader();        reader.onload = onReaderLoad;        reader.readAsText(event.target.files[0]);    }
    function onReaderLoad(event){        console.log(event.target.result);        var obj = JSON.parse(event.target.result);        alert_data(obj.name, obj.family);    }        function alert_data(name, family){        alert('Name : ' + name + ', Family : ' + family);    }     document.getElementById('file').addEventListener('change', onChange);
}());

<input id="file" type="file" />
<p>Select a file with the following format.</p><pre>{  "name": "testName",  "family": "testFamily"}    </pre>

Get the filename of a fileupload in a document through JavaScript

Try the value property, like this:

var fu1 = document.getElementById("FileUpload1");
alert("You selected " + fu1.value);

NOTE: It looks like FileUpload1 is an ASP.Net server-side FileUpload control.

If so, you should get its ID using the ClientID property, like this:

var fu1 = document.getElementById("<%= FileUpload1.ClientID %>");

---

Related Topics