10

Is it possible to use JavaScript to get an image URL into an <input type="file"> ready for submitting? Or to achieve a similar effect? Practically, I have the image at http://example.com/xxx/image.jpg and I'd like to "preload it" into a use registration form so it can be submitted with the form as if it was loaded from the disk using an input field.

The case scenario is user data obtained from an API that I want to use to populate an user registration form where one field is the user's avatar which the API hand over as a URL.

This is not about how to preview an image selected from disk using an input field!

Improve this question
2
  • Consider applying a different approach. You can put the url in a canvas then pass the raw content of that image to the server for saving. Please visit the link for additional information. permadi.com/2010/10/… Commented Feb 16, 2018 at 1:07
  • Other simple approach would be to sending the image URL to the server and grab and process the image server side. I am just curious if there is a native or browser API method that I could not find. Commented Feb 16, 2018 at 11:09

5 Answers 5

Reset to default
6

This is now possible with vanilla JS

We can fetch the file in our content script, so no background script headaches, convert the file into a blob and create a file in the memory using the new File constructor.

After that, we can select the input tag using standard query selectors, create a Data Transfer, pass the file to the input tag, and dispatch the change event with bubbles sounds simple dun it.

Here is the code snippet:

// This function does the following
// 1. fetches the PDF resume from the url provided
// 2. creates a file object with the resume data
// 3. triggers the change event on the file input element
// 4. the file input element gets the file object
// 5. the file object is uploaded to the website
async function handleResumeInput(remoteResumeURL) {
  const designFile = await createFile(remoteResumeURL);
  const input = document.querySelector('input[type="file"]');
  const dt = new DataTransfer();
  dt.items.add(designFile);
  input.files = dt.files;
  const event = new Event("change", {
    bubbles: !0,
  });
  input.dispatchEvent(event);
}
async function createFile(url) {
  let response = await fetch(url);
  let data = await response.blob();
  let metadata = {
    type: "image/png",
  };
  return new File([data], "app-logo.png", metadata);
}

This post explains it in details https://medium.com/@dev_agam/automate-file-upload-with-chrome-extension-7ee6989d58e9

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is the best solution for the "Load image from URL into file input field", thanks You saved my time, appreciated!
2

The value of an input type="file" is read-only programatically for security reasons, so no, it is not possible.

Reference Link: https://www.w3schools.com/jsref/prop_fileupload_value.asp

Improve this answer

1 Comment

I know. I was looking for alternative solutions that may mimic this behavior from a UI point of view.
2

Example using FileReader API. This load the image loaded in the File object in image html object.

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <div>
            <input id="btnFile" type="file" accept="image/*" />
        </div>

        <div>
            <img id="img" style="max-width: 100px" />
        </div>


        <script>



            var btnFile = document.getElementById("btnFile");

            //Register event on file selected or changed.
            addEvents(btnFile, "change", function (event) {
                if (event.target.files.length !== 0) {
                    var file = event.target.files[0];
                    //Check if the file is IMAGE.
                    if (file.type.match("image.*")) {

                        var fl = new FileReader();

                        //Add event to read the content file.
                        addEvents(fl, "load", function (evt) {
                            //alert(evt.target.result);
                            try {


                                //CONVERT ARRAY BUFFER TO BASE64 STRING.
                                var dataURL = evt.target.result;

                                document.getElementById("img").src = dataURL;


                            } catch (e) {
                                alert(e);
                            }

                        });

                        //Read the file as arraybuffer.

                        fl.readAsDataURL(file);

                    } else {

                        alert("Please select a IMAGE FILE");
                    }
                }

            });

            function addEvents(obj, evtName, func) {
                if (obj.addEventListener !== undefined && obj.addEventListener !== null) {
                    obj.addEventListener(evtName, func, false);
                } else if (obj.attachEvent !== undefined && obj.attachEvent !== null) {
                    obj.attachEvent(evtName, func);
                } else {
                    if (this.getAttribute("on" + evtName) !== undefined) {
                        obj["on" + evtName] = func;
                    } else {
                        obj[evtName] = func;
                    }
                }

            }

            function removeEvents(obj, evtName, func) {
                if (obj.removeEventListener !== undefined && obj.removeEventListener !== null) {
                    obj.removeEventListener(evtName, func, false);
                } else if (obj.detachEvent !== undefined && obj.detachEvent !== null) {
                    obj.detachEvent(evtName, func);
                } else {
                    if (this.getAttribute("on" + evtName) !== undefined) {
                        obj["on" + evtName] = null;
                    } else {
                        obj[evtName] = null;
                    }
                }

            }

        </script>
    </body>
</html>
Improve this answer

2 Comments

your code seems to preview an image selected from from disk using the a <input type="file"> element which is something else...
Hello, you can´t load URL image into File object. But you can load into an image object. And after you can upload the Image to server using canvas to get the content blob, binary string or base64.
2

It is not possible. As an alternative solution you can use an input[type="url"] and then on submit create the file to upload with JavaScript:

async function getFileFromUrl(url, name, defaultType = 'image/png') {
  const response = await fetch(url)
  const data = await response.blob()
  return new File([data], name, {
    type: data.type || defaultType,
  })
}

Or instead of using this function you can convert it as base64:

async function getBase64FromUrl(url) {
  let reader = new FileReader();
  const response = await fetch(url)
  const data = await response.blob()

    return await new Promise((resolve, reject) => {
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(data);
  })
}

And upload the base64 string.

Improve this answer

Comments

0

As Jahl said, it can't be done for security reasons, but as an alternative you can have a hidden input value and populate that. Display the image and have an option to submit a different image -- if no other is submitted, use the loaded avatar by default.

Improve this answer

1 Comment

Can you use actual code to exemplify your answer? This is what SO is about :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.