0

I'm trying to pass a image file from javascript to a handler in PHP, but I can't get the PHP file to find the file data.

This is my javascript

function browseImage(){
    (async function getImage () {
        const {value: file} = await Swal.fire({
            title: 'Select image',
            input: 'file',
            inputAttributes: {
                'accept': 'image/*',
                'aria-label': 'Upload your profile picture'
            }
        })

        if (file) {
            const reader = new FileReader
            reader.onload = (e) => {
                (async function uploadImage () {
                    const {value: accept} = await Swal.fire({
                        title: 'Your uploaded picture',
                        imageUrl: e.target.result,
                        imageAlt: 'The uploaded picture',
                        confirmButtonText:
                            'Ok <i class="fa fa-arrow-right></i>'
                    })

                    if (accept) {
                        var formData = new FormData();    // Creating object of FormData class
                        formData.append('pic[]', file);
                        var nam = formData.get('pic[]');
                        window.console && console.log(nam);
                        post('../controller/profile_controller.php', {'img': formData});
                    }
                })()
            }
            reader.readAsDataURL(file)
        }
    })()
}

Question is, where I can find in the PHP the passed image? I tried with $_POST['img'] and $_FILES['img'], also in $_FILES['img']['pic'], and in $_FILES['pic'], and $_FILES['pic[]']...

Now, for some reason, in my console.log I get this:

File {
    name: "buenos_aires.jpg", 
    lastModified: 1541160482000, 
    lastModifiedDate: Fri Nov 02 2018 09:08:02 GMT-0300 (Chile Summer Time),
    webkitRelativePath: "", 
    size: 93059, …
}

But when I use a normal Form->submit cycle in PHP, I note that the sent array has things like "type", "tmp_name" and so on, and this are things that I don´t see here. So my guess is that the formData object received by PHP is not the appropriate..

help please...

Rodrigo
  • 37
  • 11
  • try var_dumping the complete $_FILES array. I could imagine it will be in `$_FILES['pic[]']` – Danmoreng Mar 19 '19 at 14:58
  • 1
    Please show us the complete snippet. Or at least with all matching braces etc. You should also include where and how you define the variables you use or we won't have a clue what you're actually checking and adding. Basically, you need to add _all_ relevant code. – M. Eriksson Mar 19 '19 at 15:03
  • Can u show more code. where is `file` defined in your js? – Masivuye Cokile Mar 19 '19 at 15:03
  • Show us your `post` function. – Script47 Mar 19 '19 at 15:03
  • `{'img': formData}` - this is the mistake here, I think. Using FormData creates a full form data submission set already, but by trying to stuff that inside an object again, you are messing things up here. That line should be `post('../controller/profile_controller.php', formData);` instead. – 04FS Mar 19 '19 at 15:08
  • ... also, if it's just one file, just call it `pic` instead of `pic[]`. Then in your PHP code, you just get it with `$_FILES['pic']`. – M. Eriksson Mar 19 '19 at 15:09
  • I added ythe full JS code. @Script47 the post function I get it from here https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit – Rodrigo Mar 19 '19 at 15:28
  • @MagnusEriksson with {post('../controller/profile_controller.php', formData);} I get errors : VM233 jquery-3.3.1.min.js:2 Uncaught (in promise) TypeError: Illegal invocation at z (VM229 jquery-3.3.1.min.js:2) at w.fn.init.attr (VM229 jquery-3.3.1.min.js:2) at Function. (guide_profile.php?error=misingimage116:152) at Function.each (VM229 jquery-3.3.1.min.js:2) at post (guide_profile.php?error=misingimage116:147) at uploadImage (guide_profile.php?error=misingimage116:129) – Rodrigo Mar 19 '19 at 15:44

0 Answers0