Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sample Code for Meteor Pause and Abort (JS and Blaze) #135

Closed
manusharma1 opened this issue Jul 8, 2016 · 52 comments
Closed

Sample Code for Meteor Pause and Abort (JS and Blaze) #135

manusharma1 opened this issue Jul 8, 2016 · 52 comments
Labels

Comments

@manusharma1
Copy link

Hi @dr-dimitru ,

I hope that you are doing well.

Could you please provide the sample code for Pause and Upload for Meteor JS and Template, I was referring here but could not find:

https://github.com/VeliovGroup/Meteor-Files/tree/master/demo-simplest-upload/client

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

dr-dimitru commented Jul 8, 2016

Sure:

<template name="uploadForm">
  {{#with currentUpload}}
    Uploading <b>{{file.name}}</b>: 
    <span id="progress">{{progress.get}}%</span>
    <button id="toggle" type="button">
     {{#if onPause}}
       Continue
     {{else}}
       Pause
     {{/if}} 
    </button>
  {{else}}
    <input id="fileInput" type="file" />
    <p><small>Upload file in <code>jpeg</code> or <code>png</code> format, with size less or equal to 10MB</small></p>
  {{/with}}
</template>
Template.uploadForm.events({
  'change #fileInput': function (e, template) {
    /* ... */
  },
  'click #toggle': function (e) {
    e.preventDefault();
    this.toggle()
    return false;
  }
});

@dr-dimitru
Copy link
Member

Hey @manusharma1 ,
Is my snippet helped you?

@manusharma1
Copy link
Author

manusharma1 commented Jul 10, 2016

Hi @dr-dimitru

Thanks for your code. I tried but it didn't work I am getting this following error :

TypeError: this.toggle is not a function

Below is My Code

JS

'click #documentuploadtoggle': function (e) {
    e.preventDefault();
    this.toggle()
    return false;
  },

Template

 {{#if currentFile}}

    Uploading <b>{{currentFile.file.name}}</b>: 
    <span id="progress">{{currentFile.progress.get}}%</span>


    <button id="documentuploadtoggle" type="button">
     {{#if onPause}}
       Continue
     {{else}}
       Pause
     {{/if}} 
    </button>

{{/if}}

Note that : in the tenplate instead of {{with}} , I am using {{if}}

Also Could you also provide the code for Abort, That would be so great of you.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

dr-dimitru commented Jul 10, 2016

TypeError: this.toggle is not a function
Note that : in the tenplate instead of {{with}} , I am using {{if}}

Then use:

Template.uploadForm.events({
  'change #fileInput': function (e, template) {
    /* ... */
  },
  'click #toggle': function (e, template) {
    e.preventDefault();
    template.currentUpload.toggle()
    return false;
  }
});

For abort is same:

<button id="abort" type="button">
  Abort
</button>
Template.uploadForm.events({
  'change #fileInput': function (e, template) {
    /* ... */
  },
  'click #toggle': function (e, template) {
    e.preventDefault();
    template.currentUpload.toggle()
    return false;
  },
  'click #abort': function (e, template) {
    e.preventDefault();
    template.currentUpload.abort()
    return false;
  }
});

@dr-dimitru
Copy link
Member

@manusharma1 can we close this one?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

Sorry for the delay in reply. Its still giving me error :

TypeError: t.currentFile.toggle is not a function

TypeError: t.currentFile.abort is not a function

Below is the code:

TEMPLATE

{{#if currentFile}}


Uploading <b>{{currentFile.file.name}}</b>: 
<span id="progress">{{currentFile.progress.get}}%</span>


<button id="documentuploadtoggle" type="button">
{{#if onPause}}
Continue
{{else}}
Pause
{{/if}} 
</button>


<button id="abortuploadtoggle" type="button">
Abort
</button>

{{/if}}

TEMPLATE EVENTS

  'click #documentuploadtoggle': function (e, template) {
    e.preventDefault();
    template.currentFile.toggle();
    return false;
  },
  'click #abortuploadtoggle': function (e, template) {
    e.preventDefault();
    template.currentFile.abort();
    return false;
  },

TEMPLATE HELPER

  currentFile: function () {
    return Template.instance().currentFile.get();
  },

TEMPLATE ON CREATED

Template.project_screen_new_project_view_tabs.onCreated(function () {
  this.currentFile = new ReactiveVar(false);
});

Thanks again for your help. I think that something is missing may be, you can have a look at the code above,

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

Could you console.log(this, template) in template events map?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

It giving me output : 2 Object data, The template output is below

d.TemplateInstance_allSubsReady: false_allSubsReadyDep: t.Dependency_subscriptionHandles: ObjectcurrentFile: rdata: ObjectfirstNode: brlastNode: div#outer-container.tab-containerview: d.View__proto__: Object

Below is the Screenshot of the console.

Thanks and Best Regards,
Manu

Log

@dr-dimitru
Copy link
Member

Hmm... any idea why currentFile is false?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

I think its because of this

TEMPLATE ON CREATED

Template.project_screen_new_project_view_tabs.onCreated(function () {
  this.currentFile = new ReactiveVar(false);
});

You are so good, Thanks for your help, I really appreciate you..

Thanks and Best Regards,
Manu

@manusharma1
Copy link
Author

Sorry By Mistake I clicked the Close and Comment, Please help :)

@dr-dimitru
Copy link
Member

Do you attach events to the project_screen_new_project_view_tabs template?

@manusharma1
Copy link
Author

Hi @dr-dimitru

Yes I have done in the same template, although there are lots of other events in the same template but all are different events.

I don't know when they are trigging, why they are not working?

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

dr-dimitru commented Jul 20, 2016

Could you please publish here the template and its controller. Then I'll try to reproduce it on my end.

@manusharma1
Copy link
Author

manusharma1 commented Jul 22, 2016

@dr-dimitru ,

Sure I will do the needful, As I have told you that the template has some other functions also, Let me remove them and paste only upload specific code. I will update you soon.

Thanks and Best Regards,
Manu

@manusharma1
Copy link
Author

manusharma1 commented Jul 28, 2016

Hi @dr-dimitru ,

Sorry for late reply.

Below is my Code:

TEMPLATE HTML

    <template name="project_screen_new_project_view_tabs">


       {{#if currentFile}}

            Uploading <b>{{currentFile.file.name}}</b>: 
            <span id="progress">{{currentFile.progress.get}}%</span>


        <button id="documentuploadtoggle" type="button">
             {{#if onPause}}
               Continue
             {{else}}
               Pause
             {{/if}} 
        </button>


        <button id="abortuploadtoggle" type="button">
          Abort
        </button>


        {{/if}}


    <form name="addnewprojectdocument" id="addnewprojectdocument" method="post" enctype="multipart/form-data">

    <fieldset>


    <div class="control-group">
      <label class="control-label" for="textinput">Document </label>
      <div class="controls">
        <input type="file" id="project_document_file" name="project_document_file" placeholder="Project Document File" class="image-upload-class" /> (Max Size: 25 MB)<br />Allowed File Types : doc,pdf,docx,xls,ppt,pptx,xlsx,pptx,jpg,png,mp3,mp4
      </div>
    </div>
    <br />
    <div class="control-group">
      <label class="control-label" for="textinput">Document Name</label>
      <div class="controls">
        <input id="project_document_name" name="project_document_name" maxlength="100" placeholder="Project Document Name" size="30" value="" />
      </div>
    </div>



    <div class="control-group">
      <label class="control-label" for="selectbasic">Document Type</label>
      <div class="controls">
        <select id="project_document_type" name="project_document_type" style="width:245px;">
        <option value="">--Select--</option>
        <option value="7Gjmv3KtD8YWPevhg">DOC TYPE 1</option>
        <option value="XBZAoCqFyJCgAFuBr">DOC TYPE 2</option>
        <option value="xMH6E83aw2PoqAGtm">DOC TYPE 3</option>
        </select>

      </div>
    </div>


    </fieldset>

    <br /><br />

    <input type="submit" name="Submit" value="Add File" class="btn btn-xs btn-primary">

    </form>


    </template>

CLIENT SIDE

    if (Meteor.isClient) {


    Template.project_screen_new_project_view_tabs.helpers({

      currentFile: function () {
        return Template.instance().currentFile.get();
      }


    });




    Template.project_screen_new_project_view_tabs.events({

    'submit #addnewprojectdocument': function(event,template){

    event.preventDefault();

    var currentUser = Meteor.userId();
    var fileObj1 = template.find('.image-upload-class').files[0];
    var filesize = (fileObj1.size / 1048576).toFixed(2);
    var project_document_name = $('[name=project_document_name]').val();
    var project_document_type = $('[name=project_document_type]').val();
    var projectid = Router.current().params._id;

    if (template.find('.image-upload-class').files[0]) {

          var file = template.find('.image-upload-class').files[0];
          if (file) {

            var uploadInstance = ProjectDocumentsUploads.insert({
              file: file,

                meta: {
                project_document_name: project_document_name,
                project_document_type: project_document_type,
                document_project_id: projectid,
                createdBy: currentUser,
                createdDate: new Date()
                },

              streams: 'dynamic',
              chunkSize: 'dynamic'
            }, false);

            uploadInstance.on('start', function() {
            $('#documentuploadingdiv').removeClass('fade').addClass('show');
            $('#documentuploadingdiv').modal('show');
            template.currentFile.set(this);
            });

            uploadInstance.on('error', function(error) {
              console.error(error);
              template.currentFile.set(false);
            });

            uploadInstance.on('end', function(error, fileObj) {
              if (error) {
                alert('Error during upload: ' + error.reason);
              } else {
                //console.log(fileObj);
                $('#documentuploadingdiv').removeClass('show').addClass('fade');
                //alert('File "' + fileObj.name + '" successfully uploaded');
                $('#documentuploadingdiv').modal('hide');
                alert('success','File "' + fileObj.name + '" successfully uploaded');
                $('[name=project_document_file]').val('');
                $('[name=project_document_name]').val('');
                $('[name=project_document_type]').val('');

              }
              template.currentFile.set(false);
            });

            uploadInstance.start();
          }

        }


    },

    'click #documentuploadtoggle': function (e, template) {
        e.preventDefault();
        template.currentFile.toggle();
        console.log(this, template);
        return false;
      },


      'click #abortuploadtoggle': function (e, template) {
        e.preventDefault();
        template.currentFile.abort();
        console.log(this, template);
        return false;
      }



    });


    Template.project_screen_new_project_view_tabs.onCreated(function () {
      this.currentFile = new ReactiveVar(false);
    });




    }

SERVER SIDE

    if (Meteor.isServer) {

    Meteor.publish('ProjectDocumentsUploads', function(){
      return ProjectDocumentsUploads.collection.find({});

    });

    }



**COMMON CODE**


    this.ProjectDocumentsUploads = new Meteor.Files({

      storagePath: '/uploads/',
      collectionName: 'ProjectDocumentsUploads',
      allowClientCode: true, 
      onBeforeUpload: function (file) {

        if (file.size <= 26214400 ){

        return true;

        }else{
        return 'Please upload file with size equal or less than 25MB';
        }



      }


    });

Please let me know if you need any other information from my side, Once again Thank You very much for your help and support.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

Looks good to me.
To make sure, try to bind currentFile via {{#with currentFile }} ... {{/with}} and use this.abort(), this.toggle() in events.

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

OK, I will get back to you soon on this. Let me try what you are suggesting

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

@manusharma1 any news?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,
I think this code is working for Abort, but not for Pause, I have to test it on the server , tested locally, also when we click Abort button it takes few seconds to react and abort.

Let me do some more tests and I will get back on this, probably by next week, then we can close this.

Thanks for your patience.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

@manusharma1 if .abort() is working, all other methods should too. Okay, waiting for you.

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

I have tested it and its working fine, except the following code

 {{#if onPause}}
   Continue
 {{else}}
   Pause
 {{/if}} 

Button Always shows Continue for Pause, I think some small function is required in helper?. Please suggest.

After that we can Close this and I will put the right code for others to refer.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

Yes, helper or gust invoke .get method:

 {{#if onPause.get}}
   Continue
 {{else}}
   Pause
 {{/if}} 

@manusharma1
Copy link
Author

Hi @dr-dimitru

Sorry to bother you, Today I have uploaded on the Server and tested it there it has presented me with new issue. The abort is happening and file upload stop and show 0 KB to some KB Size (Not Full Size of the original file) and Entry is getting created in the collection. This issue is not happening locally on my Windows Machine.

I will do some more tests again and will update you.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

  • Server is Windows too?
  • What debug mode says?
  • Errors?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

  • Server is Ubuntu Linux
  • I haven't tried debug mode, Let me do it and I will get back on this
  • There is no errors that I can see in console.

Let me check it by enabling the debug mode and I will get back on this.

Thanks and Best Regards,
Manu

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

I have enabled the debug and below are the logs

Logs for Abort

Client Side Logs
[FilesCollection] [insert()]

e994974….js?meteor_js_resource=true:177 [FilesCollection] [insert()]
e994974….js?meteor_js_resource=true:177 [FilesCollection] [insert] [Tracker] [continue]
e994974….js?meteor_js_resource=true:177 [FilesCollection] [insert] using WebWorkers
e994974….js?meteor_js_resource=true:177 loadFile Chrysanthemum.jpg: 786.000ms
e994974….js?meteor_js_resource=true:177 insert Chrysanthemum.jpg: 20444.000ms

Server Side Logs

[FilesCollection] [Write Method] [DDP] Got #1/3 chunks, dst: Chrysanthemum.jpg
[FilesCollection] [Write Method] [DDP] Got #2/3 chunks, dst: Chrysanthemum.jpg
[FilesCollection] [Write Method] [DDP] Got #3/3 chunks, dst: Chrysanthemum.jpg
[FilesCollection] [Abort Method]: For /path/to/upload/TGRZ2WFBeR7jwTeQ5.jpg
[FilesCollection] [remove({"_id":"TGRZ2WFBeR7jwTeQ5"})]
[FilesCollection] [unlink(TGRZ2WFBeR7jwTeQ5, undefined)]
[FilesCollection] [Write Method] [DDP] Got #-1/3 chunks, dst: Chrysanthemum.jpg
[FilesCollection] [Write Method] [finishUpload] -> /path/to/upload/TGRZ2WFBeR7jwTeQ5.jpg

You can see that Abort Method has run as well as Write Method has also finished.

Logs for Pause

Client Side

[FilesCollection] [insert()] e99497472d6626f47398242a51aa1bbda21ad122.js:177:22234
insert Chrysanthemum.jpg: timer started e99497472d6626f47398242a51aa1bbda21ad122.js:177
loadFile Chrysanthemum.jpg: timer started e99497472d6626f47398242a51aa1bbda21ad122.js:177
[FilesCollection] [insert] [Tracker] [continue] e99497472d6626f47398242a51aa1bbda21ad122.js:177:30686
[FilesCollection] [insert] using WebWorkers e99497472d6626f47398242a51aa1bbda21ad122.js:177:31140
loadFile Chrysanthemum.jpg: 639ms e99497472d6626f47398242a51aa1bbda21ad122.js:177
insert Chrysanthemum.jpg: 21465ms e99497472d6626f47398242a51aa1bbda21ad122.js:177

Server Side

[FilesCollection] [Write Method] [DDP] Got #1/3 chunks, dst: Chrysanthemum.jpg
[FilesCollection] [Write Method] [DDP] Got #2/3 chunks, dst: Chrysanthemum.jpg
[FilesCollection] [Write Method] [DDP] Got #3/3 chunks, dst: Chrysanthemum.jpg
[FilesCollection] [Write Method] [DDP] Got #-1/3 chunks, dst: Chrysanthemum.jpg
[FilesCollection] [Write Method] [finishUpload] -> /path/to/upload//fjTeqSwZeH4rR7Tpb.jpg

Please do let me know if you want some more details.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

Sorry to bother you, Today I have uploaded on the Server and tested it there it has presented me with new issue. The abort is happening and file upload stop and show 0 KB...

  • Is abort happening by itself? Or user actually calls .abort() method?

@manusharma1
Copy link
Author

manusharma1 commented Aug 20, 2016

Hi @dr-dimitru

No Abort is happening only when user clicks the abort button which then triggers the abort() method, Otherwise the abort will not happen and file upload perfectly fine.

Please let me know if you need any other information from my side.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

There is some changes about .abort() in latest v1.7.0 release, please test it first, and let me know if issue persists

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

Thanks for this information, I will check it and will get back on this.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

@manusharma1 waiting for update in this from your end

@dr-dimitru
Copy link
Member

@manusharma1 it's been a while, any news?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

Got Stuck in something, I will get back to you in 2-3 days time, Sorry for the delay from my side.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

@manusharma1 just keep me updated.

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

As you said to upgrade to version 1.7.0, I tried to upgrade, But when I run the command -

meteor update ostrio:files

It gave me the following message:

The specified packages are at their latest compatible versions.

I also tried to remove the current packages:

ostrio:files
ostrio:templatehelpers

and then add them again, then I got the following versions installed:

ostrio:cookies@2.0.4
ostrio:files@1.5.6
ostrio:iron-router-helper-class@1.0.0
ostrio:iron-router-title@1.0.2
ostrio:templatehelpers@1.1.2

So whether I am updating it or reinstalling it I am getting the version 1.5.6

Any Suggestions?

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

@manusharma1 looks like you're on old Meteor version, are you?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

Yes mine version is old, I have just tried to update to latest and my application broke due to some conflicts, I think I need more time at my end to first resolve the conflicts which are arising due to meteor update, Let me get back on this.

If you want just put this Issue ON HOLD

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

@manusharma1 we cool. Just ping me when you're ready

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

I hope you are doing good.

Managed to rectify the issues that were coming after meteor update and resulted to conflicts with some other packages. Need some more testing

I will try to test abort issue on the server by this weekend and will get back to you.

Appreciate your help and patience

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

@manusharma1 good to hear you. Thank you for update

@manusharma1
Copy link
Author

Hi @dr-dimitru

I have upgraded meteor with all the uptodate packages, All worked fine at my local machine, when I uploaded the build to the Server, I am unable to start my app the follwoing is the error that I am getting

assert.js:93
throw new assert.AssertionError({
^
AssertionError: "undefined" === "function"
at wrapPathFunction (/home/tekyz/apps/topstest/bundle/programs/server/mini-files.js:77:10)
at Object. (/home/tekyz/apps/topstest/bundle/programs/server/mini-files.js:108:24)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/home/tekyz/apps/topstest/bundle/programs/server/boot.js:9:13)
at Module._compile (module.js:456:26)

I have seen this issue has been reported by many others and might be related to the Node Version but I am not sure what is this issue, Can you Please put some light on this?

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

Hmmm... never faced it.

  1. Do you own mini-files.js?
  2. If you own it, what is on mini-files.js:77?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

The same code is working absolutely fine at my local Windows Machine, but as I am creating a build and uploading and installing that build on the server, I am facing this issue, I am not sure about these files.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

dr-dimitru commented Oct 3, 2016

I am not sure about these files

Why?

Do you use --architecture flag when building app?
It's specially important when you build on Window, but planning to run your code on example for Linux or Mac.

To make sure it's build/platform issue, unpack builded app locally and run node main.js

@manusharma1
Copy link
Author

manusharma1 commented Oct 10, 2016

Hi @dr-dimitru ,

Yes, I always give architecture like this

meteor build path --architecture os.linux.x86_64

Also I have tested the build using node main.js on Windows Machine and all is working fine without any issue. I and doing some research on why on Ubuntu Linux, this issue is coming

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

@manusharma1

Thank you for update.
You should be good. Check your node.js version on Linux server, make sure it meets Meteor.js requirements.

@dr-dimitru
Copy link
Member

HI @manusharma1 ,

Any good news on your end?

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

Sorry about the delay, I am running this project on Shared Server, so there are other projects also running, I am taking to the System Admin and other Teams so that when I update node it won't break other projects.

Please give me some time, I will update you

Thanks and Best Regards,
Manu

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

Just to update you right now I have version : v0.10.46 on my Ubuntu Server, I am taking with other teams so that it won't effect their applications, Will update you soon.

Thanks and Best Regards,
Manu

@manusharma1
Copy link
Author

Hi @dr-dimitru ,

At my end its taking time as I mentioned that other projects are also working on the same server , Please close this Issue of now, whenever I will get chance to upgrade the Node Version, I will get back on this and then will further discuss this if required

Thanks for your patience and support on this.

Thanks and Best Regards,
Manu

@dr-dimitru
Copy link
Member

Hey @manusharma1 ,
Okay, come back at the any moment, you're welcome here.

If you've enjoyed by my support, please support this project by:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants