Javascript input file value

File data from input element

The current goal is to draw the image on a canvas. In the future, I think I might want to perform an upload through Ajax, though.

You’re pretty limited in that case. Ajax file uploads work in FF 3+, Safari 4+ and Chrome 2+, so you may have more luck in there. I, for one, don’t know of any other way of importing image data inside a canvas. If you find one, please update this question.

1 Answer 1

This is possible in at least Chrome, Firefox and Safari: Reading Files. see associated jsfiddle

function readBlob(opt_startByte, opt_stopByte) < var files = document.getElementById('files').files; if (!files.length) < alert('Please select a file!'); return; >var file = files[0]; var start = parseInt(opt_startByte) || 0; var stop = parseInt(opt_stopByte) || file.size - 1; var reader = new FileReader(); // If we use onloadend, we need to check the readyState. reader.onloadend = function(evt) < if (evt.target.readyState == FileReader.DONE) < // DONE == 2 document.getElementById('byte_content').textContent = _.reduce(evt.target.result, function(sum, byte) < return sum + ' 0x' + String(byte).charCodeAt(0).toString(16); >, ''); document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); > >; var blob; if (file.slice) < blob = file.slice(start, stop + 1); >else if (file.webkitSlice) < blob = file.webkitSlice(start, stop + 1); >else if (file.mozSlice) < blob = file.mozSlice(start, stop + 1); >console.log('reader: ', reader); reader.readAsBinaryString(blob); > document.querySelector('.readBytesButtons').addEventListener('click', function(evt) < if (evt.target.tagName.toLowerCase() == 'button') < var startByte = evt.target.getAttribute('data-startbyte'); var endByte = evt.target.getAttribute('data-endbyte'); readBlob(startByte, endByte); >>, false); 

Thanks for pointing that out, I’ve updated the fiddle. It seems like API has been finalized and Chrome is now using .slice() instead of the older .webkitSlice().

Источник

How To Set The Value Of A File Input

It’s always been impossible to set the value of a file input element with JavaScript, but this has changed last year and it’s now broadly supported, let’s see how it’s done.

If you’re interested in why this is useful, read on below, else jump to the solution

Why Is Setting The Value Of A File Input Useful?

Being able to set the value of a file input comes in handy when we’ve edited an image in the browser, or when one or more files have been dropped on the page and we want to upload them to a server.

In both situations we end up with File objects that we can’t leave anywhere but in memory. We can serve the files as downloads, upload them asynchronously, or convert them to base64 strings and store them in a hidden text field, but we couldn’t store them in a file input element.

When we’re in control of the backend we can create an API to handle asynchronous file uploads or convert base64 encoded files back to file ojects. But there are a lot of situations where we don’t control the backend.

• We’re using a NoCode platform or service.
• We built a web component and don’t know where it’s going to be used.
• There’s simply no time or people available to make the required backend changes.
• The backend is so old that literally no one wants to touch it.

In all these situations there’s no way to upload File objects created in the browser.

The moment we can set the value of a file input the backend seizes to be part of the equation, meaning we can finally progressively enhance the file input element.

Updating The File Input Files Property

We’ll set up a file input element and a short script that sets the file input files property.

The script creates a new File object and stores it in myFile

We then use DataTransfer to wrap the file in a FileList which we can assign to the files property of our file input element.

input type="file" /> script> // Get a reference to our file input const fileInput = document.querySelector('input[type="file"]'); // Create a new File object const myFile = new File(['Hello World!'], 'myFile.txt',  type: 'text/plain', lastModified: new Date(), >); // Now let's create a DataTransfer to get a FileList const dataTransfer = new DataTransfer(); dataTransfer.items.add(myFile); fileInput.files = dataTransfer.files; script>

And presto! The file input now contains “myFile.txt”

This works on all modern browsers. 🎉

Don’t see any file info? You’re probably browsing the web on Safari for MacOS 👇

But Safari

Safari was the last browser to add support for the DataTransfer constructor, it was added in version 14.1.

While Safari for MacOS detects the field has a value assigned it doesn’t show the file name. For some situations that’s fine, for others that is bad UX.

Interestingly it does work correctly on Safari for iOS 🤷‍♂️

Let’s give Safari for MacOS a little help using this knowledge:

• Webkit based browsers can render pseudo-elements inside a file input.
• The content of a pseudo-element can be set to an attribute value using attr()
• Safari populates the webkitEntries property, Chrome doesn’t.

To target Safari we’ll check if webkitEntries has a length. Then we’ll set the current file name to the data-file attribute, finally we’ll add a pseudo-element and set its content property value to the value of the data-file attribute.

style> /* Add pseudo-element only if data attribute is set */ input[data-file]::after  content: attr(data-file); margin-left: 0.375em; > style> input type="file" /> script> // Get a reference to our file input const fileInput = document.querySelector('input[type="file"]'); // Create a new File object const myFile = new File(['Hello World!'], 'myFile.txt',  type: 'text/plain', lastModified: new Date(), >); // Now let's create a FileList const dataTransfer = new DataTransfer(); dataTransfer.items.add(myFile); fileInput.files = dataTransfer.files; // Help Safari out if (fileInput.webkitEntries.length)  fileInput.dataset.file = `$dataTransfer.files[0].name>`; > script>

The field below now shows the file name as well.

In a real project we’d probably want a more robust solution.

We could for example dispatch a custom ‘change’ event and then update the data-file attribute according to the contents of the files property.

Additionally we’d have to deal with multiple files, situations where the field is cleared, or where the user inputs a new file. But that’s for another time.

For now let’s just celebrate the fact that we can finally set the value of a file input element. 😅

Conclusion

We worked around the limitation of FileList not having a constructor by creating a DataTransfer instance, populating it with files, and then getting the files property from it.

To finish things of we helped Safari to correctly show the currently selected file name.

That’s it. It took a while but we finally have a viable solution to set the value of a file input element. I’ve been using this solution with Pintura in production since last year, and it’s been working wonderfully.

I share web dev tips on Twitter, if you found this interesting and want to learn more, follow me there

At PQINA I design and build highly polished web components.

Make sure to check out FilePond a free file upload component, and Pintura an image editor that works on every device.

Источник

How to set a value to a file input in HTML?

1) The problem of default value in a file input IS NOT «done for security reasons», but the browsers «just failed to implement it, for no good reason»: see this deep report 2) A simple solution can be to use a text input on top of file input, like here. Of course you need some code to send the file, using now the value in text input and not the file input. In my case, doing HTA application, that is not a problem, I don’t use form at all.

10 Answers 10

You cannot set it to a client side disk file system path, due to security reasons.

You don’t want the websites you visit to be able to do this, do you? =)

You can only set it to a publicly accessible web resource as seen in this answer, but this is clearly not the same as a client side disk file system path and it’s therefore useless in that context.

The only way to set the value of a file input is by the user to select a file.

This is done for security reasons. Otherwise you would be able to create a JavaScript that automatically uploads a specific file from the client’s computer.

@EugeneMala: The value of the file input is a file that the user has selected. You can’t put any other content in the value.

@Guffa That’s wrong actually, you CAN put blob values in the file input value, it doesn’t necessarily have to be from the user but yeah you surely can’t put stuff on the user’s computer with it.

Not an answer to your question (which others have answered), but if you want to have some edit functionality of an uploaded file field, what you probably want to do is:

• show the current value of this field by just printing the filename or URL, a clickable link to download it, or if it’s an image: just show it, possibly as thumbnail
• the tag to upload a new file
• a checkbox that, when checked, deletes the currently uploaded file. note that there’s no way to upload an ’empty’ file, so you need something like this to clear out the field’s value

I think this is what I need. If I want to edit product information (don’t want to change the product image), how should I set to existing product image? I can show existing image in an tag but when I submit not file is passing.

@Partho63 Why do you want to upload again? If that is because of form mandatory field validation, you can somehow mark file input not required if image was already uploaded.

I have write full example for load URL to input file, and preview you can check here 1 https://vulieumang.github.io/vuhocjs/file2input-input2file/

in short you can use this function

function loadURLToInputFiled(url)< getImgURL(url, (imgBlob)=>< // Load img blob to input // WIP: UTF8 character error let fileName = 'hasFilename.jpg' let file = new File([imgBlob], fileName,, 'utf-8'); let container = new DataTransfer(); container.items.add(file); document.querySelector('#file_input').files = container.files; >) > // xmlHTTP return blob respond function getImgURL(url, callback)< var xhr = new XMLHttpRequest(); xhr.onload = function() < callback(xhr.response); >; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); > 

This is a beautiful design of code. I can use this even with data:image which is amazing for what I’m use this for. Question: Is it hard to edit your code to allow for multiple image urls? That would be amazing! Look forward to your reply and maybe edit to include haha

That’s crazy, the top 4 answers claim it’s not possible (with 600+ votes) while this answer does it so elegantly, it worked so well for my use-case

@OmriLuzon you welcome :). I take a ton of time to find way to do that, I hope many people can find it

@OmriLuzon yeah, so I use the same FileList for multiple images. So one FileList shows image1,image2 and so on. As the above code only passes one image?

You can’t. And it’s a security measure. Imagine if someone writes JS that sets file input value to some sensitive data file?

As everyone else here has stated: You cannot upload just any file automatically with JavaScript.

HOWEVER! If you have access to the information you want to send in your code (i.e., not C:\passwords.txt ), then you can upload it as a blob-type, and then treat it as a file.

What the server will end up seeing will be indistinguishable from someone actually setting the value of . The trick, ultimately, is to begin a new XMLHttpRequest() with the server.

function uploadFile (data) < // define data and connections var blob = new Blob([JSON.stringify(data)]); var url = URL.createObjectURL(blob); var xhr = new XMLHttpRequest(); xhr.open('POST', 'myForm.php', true); // define new form var formData = new FormData(); formData.append('someUploadIdentifier', blob, 'someFileName.json'); // action after uploading happens xhr.onload = function(e) < console.log("File uploading completed!"); >; // do the uploading console.log("File uploading started!"); xhr.send(formData); > // This data/text below is local to the JS script, so we are allowed to send it! uploadFile(); 

So, what could you possibly use this for? I use it for uploading HTML5 canvas elements as jpg’s. This saves the user the trouble of having to open a file input element, only to select the local, cached image that they just resized, modified, etc.. But it should work for any file type.

Источник

javascript — get the filename and extension from input type=file

I have a file upload input and when I click the browse button and select the file, I want the filename and extension to appear in two input text boxes (see code sample). It works correctly with the extension, but the filename also shows the path which gives me the fakepath warning. I understand why, but what’s a good way to do this and just get the filename into that box. I don’t need the path.

  
Output Filename  
Extension

Sorry to highjack this, but someone deleted my answer to this thread where you said that you had just submitted an app to the App Store and got that UIWebView deprecation warning: stackoverflow.com/questions/57700996/… I’m very curious if Apple will reject it based on the UIWebView usage. Can you please let me know?

10 Answers 10

This is bit old post. just for info

 var files = event.target.files var filename = files[0].name var extension = files[0].type 

In the type you will find the extension for eg: if it is jpeg image then,

extension = application/pdf 

To obtain the exact value, perform extension.replace(/(.*)\//g, »). you will get the value.

This is very neat, but comes with a «but». The type property might return empty strings. For example, if you upload a docx file as a client, but don’t have MS Word installed on your client machine, then the browser returns an empty string on type . Fallback mechanisms are necessary. This behaves differently though in each browser. I’ve seen this empty string result on type with the latest/recent Chrome version and no MS Word installed on my dev machine.

Incase I upload the *.docx file it returns like this. application/vnd.openxmlformats-officedocument.wordprocessingml.document How can I get only extension «docx»?

Источник