jqueryasp.net-corefilepond

How to upload image instantly via FilePond


I want to make a program that takes a number of photos from the user. And every photo will be uploaded to the server as soon as it is selected. How can I do this?

<script>
    FilePond.registerPlugin(
      FilePondPluginImagePreview
    );

    $('.fileUpload').filepond({
        allowDrop: true,
        allowBrowse: true,
        allowMultiple: true,
        allowReplace: true,
        allowRevert: true,
        allowRemove: true,
        allowProcess: true,
        maxFiles: 15,
        maxParallelUploads: 1,
        itemInsertLocation: 'before',
        dropOnElement: true,
        dropValidation: true,
        instantUpload: true,
        server: {
            url: './',
            timeout: 0,
            process: {
                url: 'api/UploadPictures/Upload',
                method: 'POST',
            },
            revert: null,
            restore: null,
            load: null,
            fetch: null,
        }
    });
</script>

Solution

  • I tried as below:

    in View:

    <form id="uploadform" enctype="multipart/form-data" >
        <input class="filepond" id="FileUpload_FormFile" type="file" name="FileUpload.PICs" multiple />
        <input type="submit" value="Upload" />
    </form>
    <script>
        $(document).ready(function (e) {
            pond = FilePond.create(
                document.querySelector('.filepond'), {
                allowMultiple: true,
                .....//othersettings
            });
        });
    
        $("#uploadform").submit(function (e) {
            e.preventDefault();
            var formdata = new FormData(this);
            // append FilePond files into the form data
            pondFiles = pond.getFiles();
            for (var i = 0; i < pondFiles.length; i++)
            {
                formdata.append('PICs', pondFiles[i].file);
            }
            $.ajax({
                url: "/Home/Upload",
                data: formdata,
                processData: false,
                contentType: false,
                method: "post"
            });
        })
    </script>
    

    In controller:

    [HttpPost]
            public IActionResult Upload(IFormFileCollection PICs)
            {
                ......
            }
    

    Result:

    enter image description here