jqxFileUpload and event uploadEnd - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular file upload, event, jqx-file-upload, jqx-on-upload-end, jqxFileUpload, upload end, uploadEnd

This topic contains 4 replies, has 2 voices, and was last updated by siami 8 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

jqxFileUpload and event uploadEnd Posts

April 26, 2016 at 1:47 pm jqxFileUpload and event uploadEnd #83889

siami

Participant

Hi,
I am trying to use jqxFileUpload. I can catch the uploadStart event, but the uploadEnd event does not occur. I can see the positive response from server by the browser tools. The uploaded file is saved successfully. The upload of the next file will not start.
Any advice?

html:
<jqx-file-upload jqx-settings="fileUpload_settings" jqx-on-upload-end="onUploadEnd(event)"> </jqx-file-upload>

js:

    //upload file 
    $scope.fileUpload_settings = {
          width: 370,
          uploadUrl: URL_PATH + 'uploadFiles.php',
          fileInputName: 'fileToUpload'
           
    };
    $scope.onUploadStart = function (event) {
          a =10;
          b= 10;
    };
    $scope.onUploadEnd = function (event) {
          a =10;
          b= 10;
    };

php server:

<?php
$target_dir = "/tmp/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

//echo $target_dir."\n";
//echo $target_file."\n";
//echo $uploadOk."\n";
//echo $imageFileType."\n";

//print_r($_FILES);

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
//if (file_exists($target_file)) {
//    echo "Sorry, file already exists.";
//    $uploadOk = 0;
//}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

April 27, 2016 at 5:03 am jqxFileUpload and event uploadEnd #83908

Dimitar

Participant

Hi siami,

You have bound correctly to the uploadEnd event. We tested your code with the following example and the event is triggered as expected (even though the file is not uploaded because of the non-existing upload URL):

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxfileupload.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.fileUpload_settings = {
                width: 370,
                uploadUrl: 'test',
                fileInputName: 'fileToUpload'

            };
            $scope.onUploadStart = function (event) {
                a = 10;
                b = 10;
            };
            $scope.onUploadEnd = function (event) {
                alert('uploadEnd event triggered');
                a = 10;
                b = 10;
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-file-upload jqx-settings="fileUpload_settings" jqx-on-upload-end="onUploadEnd(event)"> </jqx-file-upload>
    </div>
</body>
</html>

Please share if there are any errors thrown in your browser’s console while running your code. Please also make sure you are using the latest version of jQWidgets (4.1.1).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 28, 2016 at 7:43 am jqxFileUpload and event uploadEnd #83964

siami

Participant

Hi Dimitar,

My working version of jQWidgets was 4.0.0. I tested your code with version 4.1.2. but result is the same:

Chromium browser (under Ubuntu 14.04.2 LTS) returns these errors:

POST file:///home/samuel_lefkovits/Tmp/admin3an/test net::ERR_FILE_NOT_FOUND jqxfileupload.js:7
a.extend._uploadFile @ jqxfileupload.js:7
a.extend.uploadAll @ jqxfileupload.js:7
(anonymous function) @ jqxfileupload.js:7
m.event.dispatch @ jquery-1.11.1.min.js:3
r.handle @ jquery-1.11.1.min.js:3

Uncaught SecurityError: Failed to read the ‘contentDocument’ property from jquery-1.11.1.min.js:2
‘HTMLIFrameElement’: Blocked a frame with origin “null” from accessing a frame with origin “null”. The frame requesting access has a protocol of “file”, the frame being accessed has a protocol of “data”. Protocols must match.
m.each.contents @ jquery-1.11.1.min.js:2
m.extend.map @ jquery-1.11.1.min.js:2
m.each.m.fn.(anonymous function) @ jquery-1.11.1.min.js:2
(anonymous function) @ jqxfileupload.js:7
m.event.dispatch @ jquery-1.11.1.min.js:3
m.event.add.r.handle @ jquery-1.11.1.min.js:3

It seems, path to the chosen file is incorrect.

br,
Samuel

May 3, 2016 at 6:15 am jqxFileUpload and event uploadEnd #84039

Dimitar

Participant

Hi Samuel,

I already stated this in my previous post – the ‘test’ uploadUrl is for test purposes only. If, however, you ignore the error related to it, you should see the alert stating “uploadEnd event triggered”. We tested this example with Chrome and Internet Explorer 11 and it works as expected.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 6, 2016 at 10:47 am jqxFileUpload and event uploadEnd #84153

siami

Participant

Hi Dimitar,

I’ve tested your code in empty project with version of jQWidgets 4.1.0 and 4.1.2. It works fine.
I must look for a mistake in my project. Thank you for your effort. Excuse me for not adequately question.

br,
Samuel

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.