Transfer File obect from input file to php back-end

Question

Trying to use a simple to upload images to back-end server using javascript and PHP only (No AJAX). I have decided to try appending the .files[0] data from input to the FormData in order to send it with the POST.

I would prefer not to use a submit form and would much rather use an httpRequest in order to get the pass/fail message as other things are to be done on the same page after the image/file is uploaded.

If possible, could someone please indicate to me a way of sending the data object through the httpRequest parameters. Once it reached the back-end, I can manipulate it fine, but I cannot find a way to send it that works via non AJAX methods.

HTML:

File Location: <br>
<input type='File' name='addNewMediaFileLocation' id='addNewMediaFileLocation' class='addFileText'><br>
Media Type: <select id='addFileFromLocalTypeSelect' class='addFileSelect>
 <option>....</option></select>
<input type='button' class='profileButton' id='addMediaFromLocalButton' value='Upload' onclick="uploadMediaFromLocal('$ComicName', '$alias');"

JAVASCRIPT EDIT - Added getxml()

function getxml()
{ 
if (window.XMLHttpRequest) 
{
    xmlhttp = new XMLHttpRequest();
} 
else 
{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp; 
}

function uploadMediaFromLocal(ComicName, UploadedBy)
{
var Type = document.getElementById("addFileFromLocalTypeSelect").value;
var file = document.getElementById('addNewMediaFileLocation').files[0];
var fd = new FormData();
fd.append("uploadedFile", file);

xmlhttp = getxml();
xmlhttp.open("POST", "php/actions.php?F=addMediaFromLocal" + "&Type="+Type, true);
xmlhttp.onreadystatechange = function()
{
    if(xmlhttp.readyState == XMLHttpRequest.DONE)
        var response = xmlhttp.responseText;
        if(response == 'Success')
        {
            document.getElementById("uploadMSG").innerHTML='Image upload successful';
            document.getElementById("addNewMediaFileLocation").value="";
            document.getElementById("addMediaDescriptionForLocalText").value="";
        }
        else
        {
            document.getElementById("uploadMSG").innerHTML=response;
        }
}
xmlhttp.send(fd);
}

PHP

if($function == 'addMediaFromLocal')
{
$AddSuccess = true;
$AddError ='File not uploaded.';
$MediaType = $_REQUEST['Type'];
$FileType = $_FILES['uploadedFile']['type'];
$FileName = $_FILES['uploadedFile']['name'];
$FileContent = file_get_contents($_FILES['uploadedFile']['tmp_name']);

 ....VALIDATE INFO...
if($AddSuccess) 
{
    //check success
    if(move_uploaded_file("../media/$name",$FileContent) )
    {
        print("Succes");
    }
    else 
    {
        print($AddError. "Image upload unsuccessful, please check your folder permission<br>");
    }
}
else
{
    print($AddError);
}

}

ERROR:

E_NOTICE Error in file �actions.php� at line 1036: Undefined index: uploadedFile

Well, that makes me an idiot. I will remove that part of the title - any idea how to make this work? — Jim Evil Chippy Perry, Dec 01 '17 at 19:10
we may need to see your getxml() function. You probably need to set encoding type to multipart/form-data — Garr Godfrey, Dec 01 '17 at 19:10
@GarrGodfrey I have added the getxml function. It's a simplified httprequest checker to see if the user is using Internet Exploder or not. — Jim Evil Chippy Perry, Dec 01 '17 at 19:13
@Taplar Adding the setRequestHeader("Content-Type",mulitpart/form-data"); has not fixed it :(. All of the validation is being done in the back-end, hence why I am sending the file to the php side, because not only does the file have to be uploaded, but a link must be made in the database. (hence the requirement to do it server side) — Jim Evil Chippy Perry, Dec 01 '17 at 19:23
CORS cannot be over come by just changing the request. It *must* also be handled for on the server. If javascript could circumvent CORS, it would not be a security mechanism. — Taplar, Dec 01 '17 at 19:23
@Taplar Excellent. How do I accomplish this properly without massive security risks and send the file to my server from the user's local machine? — Jim Evil Chippy Perry, Dec 01 '17 at 19:27
How to do so can be specific to the server you are on. I would point you towards: https://enable-cors.org/ — Taplar, Dec 01 '17 at 19:28
@Taplar If I am unable to modify the server because I am using their (Dreamhost) VPS system (Allowed to host websites, but not make modifications to anything short of the file structure) what can I do? I know I can upload files from other URLs because I have made the same request, except it takes a file from another website. — Jim Evil Chippy Perry, Dec 01 '17 at 19:36
@GarrGodfrey I followed the link claiming this question was a duplicate given to me by Taplar and have implemented xmlhttp.setRequestHeader("Content-Type",multipart/form-data");. Ironically, I now get the error of the original poster of this question and my server side still does not receive the file (or at least, the file by the name 'uploadedFile', in which the FormData should have it encapsulated with). Any ideas on your end? — Jim Evil Chippy Perry, Dec 01 '17 at 20:00
sorry, setting the content-type removes the boundary that it should automatically generate, undo that. This also doesn't seem like a CORS issue if the error is in the PHP. — Garr Godfrey, Dec 01 '17 at 20:33
can you do print_r($_FILES); in your PHP to see what you are getting? — Garr Godfrey, Dec 01 '17 at 20:52
@GarrGodfrey Just got home - on my newer firefox browser, it works. Not on chrome, mind you — Jim Evil Chippy Perry, Dec 01 '17 at 20:57
@GarrGodfrey Ok. Nevermind. It's now working. So... this was all because of an out-dated browser? — Jim Evil Chippy Perry, Dec 01 '17 at 21:02
Not sure. See also this, similar problem but no solution: https://stackoverflow.com/questions/45642953/xmlhttprequest-formdata-file-upload-not-working-in-chrome-with-large-files — Garr Godfrey, Dec 01 '17 at 21:08

Transfer File obect from input file to php back-end

0 Answers0