How to make formData object from image URL

Question

I want to make image upload from url for example: http://.. ../logo.png I need to make formData object from image url but it doesn't work:

HTML:

<form id="form-url">
    <input type="text" class="image" id="textarea" placeholder="URL" />
    <button>UPLOAD</button>
</form>

Javascript:

$("#form-url").submit(function(e) {
        if ($(".image").val() != "URL" && $(".image").val() != "") {

            //I also tried this:
            var data;
            var img = new Image();
            img.src = $(".image").val();
            img.load = function(){
                data = getBase64Image($(".image").val());
            };
            //but it send undefined

            //and this:
            var data = URL.createObjectURL($(".image").val()); //dont work
            //error: TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL.

               //Upload process working on normal input type file uploading but no on URL image
            var formData = new FormData(data);
            formData.append("fileToUpload", data);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', "upload_ajax.php", true);

            xhr.onload = function () {
              if (xhr.status === 200) {
                data = xhr.responseText;
                datas = data.split("_");
                if (datas[0] != "true") {
                    alert(data);
                } else {
                    alert('YES');
                }
              } else {
                alerter('An error occurred while uploading this file! Try it again.');
              }
            };

            xhr.send(formData);

        } else { alerter("Your file must be an image!"); }
        return false;
    });

My php script for debug:

<?php
    if (isset($_POST)) {

        var_dump($_POST);
        if (empty($_FILES['fileToUpload']['tmp_name'])) {
            echo "Your file must be an image!";
        } else {
            echo $_FILES['fileToUpload']['name'];
            echo $_FILES['fileToUpload']['size'];
        }
    }
?>

Thanks for all help and your time.. and sorry for my bad english (student)

Take a look over here, that should do it. https://stackoverflow.com/a/8758614/1592572 — Victor Häggqvist, Apr 07 '14 at 17:09
@VictorHäggqvist, thats uploading a file from clients computer, he wants to retrieve and image from some URL and upload it. — Patrick Evans, Apr 07 '14 at 17:11

score 0 · Answer 1 · edited May 23 '17 at 10:26

If getBase64Image is from here, or is similar to it.

Then you are using it wrong. You need to pass it the image node itself. Also the image onload event is async, and as such you have to wait for it to be done to get the data and send it.

var xhr = new XMLHttpRequest();
var formData = new FormData();
xhr.open('POST', "upload_ajax.php", true);
...
var img = new Image();
img.onload = function(){
   var data = getBase64Image(this);
   formData.append("fileToUpload", data);
   xhr.send(formData);
};

Also note on the server side you will need to decode it from the base64 encoding, as it is being sent by string, it is going to be in $_POST not $_FILE

var rawContents = base64_decode($_POST['fileToUpload']);

Note you could also just send the url to the php script and just have php get the image data

var rawContents = file_get_contents($_POST['imageurl']);

How to make formData object from image URL

1 Answers1