1

Working in Joomla 4 com_users profile edit.php. I add the following:

<img id="photo_img" alt="" src="" />
<input type="file" id="imageFile" name="imageFile" onchange="previewImage(event)">

<script>
    function previewImage(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
            document.getElementById('photo_img').src = reader.result;
        };
        reader.readAsDataURL(input.files[0]);
    }   
</script>

Now, in ProfileModel.php the following is added:

$file = Factory::getApplication()->input->files->get('imageFile');
if ($file && $file['error'] === 0) {
    $tempPath = $file['tmp_name'];
    $fileName = File::makeSafe($file['name']);
    $targetPath = JPATH_ROOT . <MY PATH> . '/images/' . $fileName;
    if (File::upload($tempPath, $targetPath)) {
        $response = $tempPath;
    } else {
        Factory::getApplication()->enqueueMessage('Error uploading file!', 'error');
    }
} else {
    Factory::getApplication()->enqueueMessage('Error uploading file!2', 'error');
}

And it works great! No problem! Image is previewed before submit and when form is submitted image uploads OK. So far, so good. Now I want to add drag & drop function. I modify the above as follows:

<img id="photo_img" alt="" src="" />

    <div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
        <div id="drag_upload_file">
            <p>Drop file here</p>
            <p>or</p>
            <p><input type="button" value="Select File" onclick="file_explorer();" /></p>
            <input type="file" id="imageFile" name="imageFile" onchange="previewImage(event)">
        </div>
    </div>

<script>
    function upload_file(e) {
        e.preventDefault();
        ajax_file_upload(e.dataTransfer.files[0]);
    }
    
    function file_explorer() {
        document.getElementById('imageFile').click();
    }   
    
    function ajax_file_upload(file_obj) {
        if (file_obj != undefined) {
            //Preview image before submit
            var reader = new FileReader();
            reader.onload = function(){
                document.getElementById('photo_img').src = reader.result;
            };
            reader.readAsDataURL(file_obj);
            
            //Create and send to server formData
            var formData  = new FormData();                  
            formData.append('file', file_obj);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', <MY PATH> + 'upload.php', true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                } else {
                    console.error('Error uploading files.');
                }
            };          
            xhr.send(formData);
        }
    }       
    
    function previewImage(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
            document.getElementById('photo_img').src = reader.result;
        };
        reader.readAsDataURL(input.files[0]);
    }   
</script>

And the upload.php file simplified is:

<?php
$filename = time().'_'.$_FILES['file']['name'];
move_uploaded_file($_FILES['file']['tmp_name'], <MY PATH> . '/images/' . $filename);
die;
?>

After all this modification, selecting file and submitting form still uploads the file, but drag and drop is not working! When file is dropped it is previewed OK, but when form is submitted, upload is not working and the Model reports error on line if ($file && $file['error'] === 0) {. What am I doing wrong? Why formData is not transfered to server?

1 Answer 1

1

Finally, the problem was me! JPATH_BASE was wrongly defined in the external php file called by ajax. When set correctly, everything worked OK! Another issue was the way I was handling the file upload on the server side. The FormData object in JavaScript appends the file using the key 'file', but in the PHP code, I was trying to access it using the key 'imageFile'. Corrected too and works great!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.