1

I want to be able to have a user drag and drop a pdf file and have a modal appear for the user to quickly fill out a form about the file. When the user clicks submit, the file and the form data are passed using Ajax to a php file to then have the file upload and the data processed into a DB.

script.js

// On drop calls uploadFile Function and appends to formData object
    $("#dropzone").on ('drop', function (e) {
        e.preventDefault();
        $(this).removeClass('dropzone dragover').addClass('dropzone');
        $("#myModal").removeClass("hidden").addClass("visible");


        var file = e.originalEvent.dataTransfer.files;
        uploadFile(file);
    });

    var uploadFile = function(files){
        formData = new FormData();
        formData.append("file", files);
        var x;
        for (x = 0; x < files.length; x = x + 1){
            let file = files[x];
            formData.append('files[]', file);
        } 
    };

// On Form submit all data is saved to values and Ajax call to users.php
    $("form").on('submit', function(e) {
        // e.preventDefault();
        var values = $(this).serialize();
        $("#myModal").removeClass("visible").addClass("hidden");
        url = 'app/forms/users.php'

        $.ajax({
            type: 'POST',
            url: 'app/forms/users.php',
            processData: false,
            contentType: false,
            cache: false,
            data: { formData, values },
            dataType: 'json',
            success: console.log("Done")
        });
    });

This is where I run into issues. I am able to console.log(Array.from(formData)) at all points of interaction before the user hits submit. But when the user submits the form it seems the formData vanishes from existence.

users.php

} else if ($_POST['dispatch'] == 'file_upload') {

        // Upload File
        var_dump($_FILES);
        var_dump($_POST);

        $errors = [];
        $target_dir = 'F:\wamp64\www\blank\dev\uploads/';
        $extensions = ['pdf', 'PDF'];
        $all_files = count($_FILES['file']['tmp_name']);

        for ($i = 0; $i < $all_files; $i++) {  
            $file_Name = $_FILES['file']['name'][$i];
            $file_Tmp = $_FILES['file']['tmp_name'][$i];
            $file_Type = $_FILES['file']['type'][$i];
            $file_Size = $_FILES['file']['size'][$i];
            $tmp = explode('.', $_FILES['file']['name'][$i]);
            $file_ext = strtolower(end($tmp));

            $file = $target_dir . date('U')."-".basename($file_Name);

            if (!in_array($file_ext, $extensions)) {
                $errors[] = 'Extension not allowed: ' . $file_Name . ' ' . $file_Type;
            }

            if ($file_Size > 9000000000000000000) {
                $errors[] = 'File size exceeds limit: ' . $file_Name . ' ' . $file_Type;
            }

            move_uploaded_file($file_Tmp, $file);

        if ($errors) print_r($errors);
        }
        // Process to DB

Currently, the only data I can find is the formData from the form itself. If there is any information that I missed that could be helpful just let me know. Either I need to go about this a different way or I'm just missing something.

Any help is appreciated. Thank you.

Twissted
  • 71
  • 2
  • 10
  • 1
    In your JS, where is `formData` defined? – Twisty Apr 01 '20 at 04:31
  • 1
    @Twisty I defined formData inside document ready in an attempt to make it global? I figure that was working as intended since before the user clicks submit I can still see the array information from within the jquery Submit function. – Twissted Apr 01 '20 at 18:46
  • 1
    Ok, as long as `formData` is defined outside of the functions; it can be in scope. – Twisty Apr 01 '20 at 18:54
  • 1
    Please review: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append and https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload – Twisty Apr 01 '20 at 19:16
  • 1
    Have a look at this, This might help you. https://stackoverflow.com/a/21045034/12831866 – Akash Neeli Dec 14 '21 at 10:19

0 Answers0