jQuery UI Widgets Forums Plugins AngularJS jqxFileUpload and event uploadEnd

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • 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.";
        }
    }
    ?>
    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/

    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

    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/

    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

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

You must be logged in to reply to this topic.