How to upload image in jQuery jTable

How to upload image in jQuery jTable

jquery on click upload image
how to upload image using javascript in php
jquery image
upload photo with jquery ajax
jquery multiple image upload with preview and delete demo
jquery file upload - stack overflow
codeigniter tutorial - upload image file using jquery ajax
upload file using jquery ajax

I successfully created an upload field in create mode in jQuery jTable as follows:

upload: {
title: 'Upload Image',                                      
input: function (data) {    
return  '<input type="file" name="file">';
'<input type="submit" value="Submit" id="submitBtn" />';
  },
},

I am able to successfully display the browse button and select files. I am unable to submit the form:

Error: newcourse.php' not found or unable to stat.

with the same file name in which the code is.

I am at a dead end. Where will the file be uploaded to? In the same directory? How to do it in jTable ? Can it be done using ajax ? If so, how to proceed? jTable documentation is very poor.


I finally found a soluton to upload files on jTable Now with the version of jtable 2.4.0 (the most recent at the moment writing this post)

on your file.js add the following methods:

// Read a page's GET URL variables and return them as an associative array.
function getVars(url)
{
    var formData = new FormData();
    var split;
    $.each(url.split("&"), function(key, value) {
        split = value.split("=");
        formData.append(split[0], decodeURIComponent(split[1].replace(/\+/g, " ")));
    });

    return formData;
}

// Variable to store your files
var files;

$( document ).delegate('#input-image','change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
    files = event.target.files;
}

//The actions for your table:

$('#table-container').jtable({
    actions: {
                listAction:     'backoffice/catalogs/display',
                deleteAction:   'backoffice/catalogs/delete',
                createAction: function (postData) {
                    var formData = getVars(postData);

                    if($('#input-image').val() !== ""){
                        formData.append("userfile", $('#input-image').get(0).files[0]);
                    }

                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: 'backoffice/catalogs/update',
                            type: 'POST',
                            dataType: 'json',
                            data: formData,
                            processData: false, // Don't process the files
                            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                            success: function (data) {
                                $dfd.resolve(data);
                                $('#table-container').jtable('load');
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },
                updateAction: function (postData) {
                    var formData = getVars(postData);

                    if($('#input-image').val() !== ""){
                        formData.append("userfile", $('#input-image').get(0).files[0]);
                    }

                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: 'backoffice/catalogs/update',
                            type: 'POST',
                            dataType: 'json',
                            data: formData,
                            processData: false, // Don't process the files
                            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                            success: function (data) {
                                $dfd.resolve(data);
                                $('#table-container').jtable('load');
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },

// Now for the fields:

    fields: {
                id_catalog: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                thumb_url: {
                    title: 'Image',
                    type: 'file',
                    create: false,
                    edit: true,
                    list: true,
                    display: function(data){
                        return '<img src="' + data.record.thumb_url +  '" width="150" height="207" class="preview">';
                    },
                    input: function(data){
                        return '<img src="' + data.record.thumb_url +  '" width="150" height="207" class="preview">';

                    },
                    width: "150",
                    listClass: "class-row-center"
                },
                image: {
                    title: 'Select File',
                    list: false,
                    create: true,
                    input: function(data) {
                        html = '<input type ="file" id="input-image" name="userfile" accept="image/*" />';
                        return html;
                    }
                }
           }
});

Now, you are able to process the files on your server side.

That's all folks.

How to create a file upload field · Issue #1252 · volosoft/jtable · GitHub, I just finished implementing a file upload field using jtable in an app I am working on. letters or digits that appear in the image which has no letters or digits. http://www.vhghorecha.in/jtable-jquery-plugin-file-upload-control/  Uploading image file in jtable and store on mysql 2 weeks. i want to be able to upload image file along with other form data and insert or update my sql DB. the



Hello shels

I lost a lot of time to searching of a solution of this issue. I read a many articles and found that this solution working for me fine:

actions: {
 listAction: 'modules_data.php?action=list',
 deleteAction: 'modules_data.php?action=delete',

 updateAction: 'modules_data.php?action=update',
 createAction: 'modules_data.php?action=create'
},

...

image_file: {
                        title: 'Album cover',
                        list: true,
                        create: true,
                        edit: true,
                        input: function(data) {
                            return '<form target="iframeTarget" class="formUploadFile" action="file_upload.php" method="post" enctype="multipart/form-data"> <input type="file" onchange="this.form.submit()" name="myFile"/> </form> <iframe class="upload-iframe" style="display: none;" src="#" name="iframeTarget"></iframe>';
                        }
                    },

image: {
                        title: 'Album cover',
                        list: true,
                        create: true,
                        edit: true,
                        input: function(data) {
                            html = '<input type ="hidden" id="image" name="image" />';
                            return html;
                        }
                    },

....

How to capture submit response in a form created dynamically?

So you can capture submit event using: ...

formSubmitting: function(event, data) {
                    filename = $('input[type=file]').val().split('\\').pop();
                    ($("#" + data.form.attr("id")).find('input[name="image"]').val(filename));
                },

And save data to the server side script. I think, it's a good solution and hope will be helpful.

Best Regards

Kameliya

File Upload · Issue #906 · volosoft/jtable · GitHub, Hi , How i do file upload option in jtable . jQuery jTable File Upload in PersonActions.php i got the value of the selected image filename like  This section contains the detail about the Upload and Crop Image using jQuery plug-in & PHP. Upload and Crop Image using jQuery plug-in & PHP. In this section you will learn how to create a application in which you can upload image and crop it and save both the image in a folder.


console.log not working for FormData. Use instead

for (var data of formData) {
    console.log(data);
}

Uploading image file in jtable and store on mysql, Uploading image file in jtable and store on mysql contentType: false, // Set content type to false as jQuery will tell the server its a query string  How to upload Image file using AJAX and jQuery In PHP you can easily upload any type file on the server using the move_uploaded_file () method. But it requires form submit for uploading the selected file. If you want to store image file and display preview without reloading the whole page then you need to use jQuery AJAX.


How to upload Image file using AJAX using jQuery, Learn how to upload image file using JQuery ajax method in PHP. PHP code you need to create a new table where you want to save the uploaded image. I just finished implementing a file upload field using jtable in an app I am working on. There are already a few workarounds posted, but I am posting mine because I feel it is the easiest approach with the least amount of extra code requ


How to select and upload image file using JQuery Ajax , In this example an image file can be uploaded, limited to 500KB using The Javascript shown below is used to initialise the table shown in this example: https://code.jquery.com/jquery-3.5.1.js · https://cdn.datatables.net/1.10.21/js/​jquery. How can I show images (gif / jpg) in a JTable fields. I tried with ImageIcon type arrays, but don't work. For example I want to make a JTable that contains person's name and an image of him beside the name field.


DataTables example - File upload, Uploading file using ajax & Jquery to store data in MySQL table by using multipart/form-data. From the " Add New Item " window, select " Web Form " and give a name for it. Set the newly added ".aspx " page as start page for the project. To do so, right-click on the ".aspx " page and select " Set As Start Page " option from the context menu. Let's add the HTML controls, i.e., for this case, add a file upload control and a button.