Kevin Powell - Community•2mo ago

How do I get Javascript to add an uploaded image to a form.

I while ago I did a project on icodethis and now am actually utilising it. Here it is on CodePen https://codepen.io/iBlackwolf/pen/NPGGLRV (Ignore the simulated "upload") Line 125 in the Javascript shows the image data in the console I can't for the life of me figure out how to get the image data into a HTML form input, so it can be submitted to my PHP script. EDIT: This is basically what I have ...

<form id="form-essentials" action="URL IN HERE" method="post" enctype="multipart/form-data">

    (VARIOUS INPUT IN HERE)

    <!-- Photo Info -->
    <input id="photo" type="file" name="photo" value="PHOTOHERE">
    </div>
</form>

<!-- Photo -->
<div id="photocard" class="card white hide">
    <h1>Upload a photograph</h1>
    <div id="droparea">
        <input type="file" id="uploadfiles" accept="image/*, video/*" hidden>
        <div id="btn-browse" class="inset">
            <button><span class="btn-text">Browse</span></button>
        </div>
        <input type="file" id="userphoto" capture="user" accept="image/*" hidden>
        <div id="btn-takephoto" class="inset">
            <button><span class="btn-text">Take Photo</span></button>
        </div>


        <small>OR DRAG IMAGE INTO DOTTED AREA</small>
        <div id="image" class="hide">
            <div><img id="picture"></div>
            <input id="filename" type="hidden" value="imagedata">
        </div>
    </div>
</div>

<form id="form-essentials" action="URL IN HERE" method="post" enctype="multipart/form-data">

    (VARIOUS INPUT IN HERE)

    <!-- Photo Info -->
    <input id="photo" type="file" name="photo" value="PHOTOHERE">
    </div>
</form>

<!-- Photo -->
<div id="photocard" class="card white hide">
    <h1>Upload a photograph</h1>
    <div id="droparea">
        <input type="file" id="uploadfiles" accept="image/*, video/*" hidden>
        <div id="btn-browse" class="inset">
            <button><span class="btn-text">Browse</span></button>
        </div>
        <input type="file" id="userphoto" capture="user" accept="image/*" hidden>
        <div id="btn-takephoto" class="inset">
            <button><span class="btn-text">Take Photo</span></button>
        </div>


        <small>OR DRAG IMAGE INTO DOTTED AREA</small>
        <div id="image" class="hide">
            <div><img id="picture"></div>
            <input id="filename" type="hidden" value="imagedata">
        </div>
    </div>
</div>

Blackwolf

CodePen

Upload Media

...

43 Replies

Rägnar O'ock•2mo ago

what have you tried so far ?

BlackwolfOP•2mo ago

All sorts, but it's all guess work. I've searched google for over a day and just getting frustrated, especially as I suspect it's probably something so simple the best i've done is pass file.name to "value" on the input, but unsure how to access this from php

Rägnar O'ock•2mo ago

so, you want to have a file input in a form to upload a file to a php server, is that it?

Rägnar O'ock•2mo ago

have you looked at the <input type=file> ?

MDN Web Docs

<input type="file"> - HTML | MDN

<input> elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.

BlackwolfOP•2mo ago

i have that setting. this example from mdn wants a fresh file uploaded. I have already uploaded it and need to pass existing information to the form. or somehow grab it from the memory using php

ἔρως•2mo ago

are you going to make this public?

13eck•2mo ago

You should just submit the form (using enctype = "multipart/form-data" on the form). The PHP code then recieves the form data and parses it. Or I guess you could send it via fetch() as a blob

BlackwolfOP•2mo ago

sorry, done now yes, but I have to manual add this data to the form and not sure how to do it ok, not sure if this is the correct route, but I've done this in JS

photo.value = URL.createObjectURL(photoFile)

photo.value = URL.createObjectURL(photoFile)

and my php recognises this,

photo: "blob:https://(WEBSITE)/ba24ec4c-05fa-40a5-97bf-8e886a4abca8"

photo: "blob:https://(WEBSITE)/ba24ec4c-05fa-40a5-97bf-8e886a4abca8"

but unsure how to handle it

ἔρως•2mo ago

you don't. you use a FormData and send it all together over xhr/fetch what you're doing there is to convert the blob into an usable url what you can do with it? use it as an url and FREE IT WHEN YOU'RE DONE WITH IT that last part is NOT optional

Ganesh•2mo ago

What do you mean convert it into a usable url It's not available outside the document is it? I assume it usecase is when you have a file inputted by user and you want to display it somewhere else on the same site/document

ἔρως•2mo ago

an url you can use no, it isnt yup, that is one of the usecases you can also render a canvas to a blob and display the image you can also use it for video and images and sound maybe even fonts

Ganesh•2mo ago

Gotcha gotcha

ἔρως•2mo ago

it has limited usefulness but where it is useful, it is a godsend before this, you had to read the image to a canvas, then render the image to a blob, base64 it and show it as a data url wait, no, there is s method to get it as a base64 image imagine that for a 300kb image

BlackwolfOP•2mo ago

I want to be able to name and save the image to a folder on the server using PHP

ἔρως•2mo ago

then read the php tutorial on handling uploaded files

13eck•2mo ago

Right, so you need to send the file to your PHP server first. Usually that's done in the onSubmit event of a form and you use the fetch() function to do so.

ἔρως•2mo ago

the file is handled separatedly, so, it has to be sent with fetch/xhr using FormData

13eck•2mo ago

Right ☝️

ἔρως•2mo ago

and that but the FormData is essential too

13eck•2mo ago

https://javascript.info/formdata#sending-a-form-with-a-file

FormData

BlackwolfOP•2mo ago

that looks very interesting, thank you. I'm about to go out, so will look at that tomorrow this is what i don't know how to do. the best i have got is a reference to the blob

ἔρως•2mo ago

mdn has an example of it you can copy-paste, adjust a tiny bit and it should work

BlackwolfOP•2mo ago

do you have a link please, because i have spent over 2 days googling this information

ἔρως•2mo ago

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects i just googled for "fetch with formdata"

BlackwolfOP•2mo ago

i guess it's easier when you know what to actually google for lol

ἔρως•2mo ago

i mean, we told you multiple times to use fetch and formdata you already had all the information

BlackwolfOP•2mo ago

oh yes, this was after i had done all the googling

ἔρως•2mo ago

yeah, but you didnt try after i didnt google anything obscure or any slang or anything like that

BlackwolfOP•2mo ago

did i need to google after? I have been reading what i have been advised nothing is obscure once you know, i was googling "how to upload image data from javascript to php" type things

ἔρως•2mo ago

you didnt, but you would find what i did if you tried again that is extremely vague

BlackwolfOP•2mo ago

i was not aware that FETCH or FORMDATA was involved

ἔρως•2mo ago

learning how to google is an important part of this, as there are thousands of things you need to keep in mind

BlackwolfOP•2mo ago

criticising my knowledge is not helping anyone

ἔρως•2mo ago

im not i just said that i dont know everything why would i criticize you not knowing everything?

BlackwolfOP•2mo ago

Thank you to all who gave advice. I have now resolved my issue 🙂

ἔρως•2mo ago

how did you do it?

BlackwolfOP•2w ago

i figured it out differently, basically

photoFile = e.target.files[0]
let file = new File([photoFile], photoFile.name, { type: photoFile.type, lastModified: photoFile.lastModified, size: photoFile.size })
    let container = new DataTransfer()
    container.items.add(file)
    newPhoto.files = container.files // newPhoto being the INPUT id
    formPhotos.submit()

photoFile = e.target.files[0]
let file = new File([photoFile], photoFile.name, { type: photoFile.type, lastModified: photoFile.lastModified, size: photoFile.size })
    let container = new DataTransfer()
    container.items.add(file)
    newPhoto.files = container.files // newPhoto being the INPUT id
    formPhotos.submit()

ἔρως•2w ago

what in the fuck in going on in that code? 🤣

BlackwolfOP•2w ago

it's basically $_FILES in PHP, all the data that is attached to an image

ἔρως•2w ago

yeah, but it's just ... why?

BlackwolfOP•2w ago

because it makes sense to me and it works perfectly i tried other stuff and it either did not work or did not make sense got a new question coming up now ...

13eck•2w ago

New question, new post please

BlackwolfOP•2w ago

i did

Gaming

Programming

How do I get Javascript to add an uploaded image to a form.

Did you find this page helpful?