Meteor-files: Sample Code for Meteor Pause and Abort (JS and Blaze)

[manusharma1]

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]

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]

Hey @manusharma1 ,
Is my snippet helped you?

[manusharma1]

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]

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]

@manusharma1 can we close this one?

[manusharma1]

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]

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

[manusharma1]

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

[dr-dimitru]

Hmm... any idea why currentFile is false?

[manusharma1]

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]

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

[dr-dimitru]

Do you attach events to the project_screen_new_project_view_tabs template?

[manusharma1]

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]

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

[manusharma1]

@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]

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]

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

[manusharma1]

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]

@manusharma1 any news?

[manusharma1]

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]

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

[manusharma1]

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]

Yes, helper or gust invoke .get method:

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

[manusharma1]

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]

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

[manusharma1]

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]

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] [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]

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]

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]

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

[manusharma1]

Hi @dr-dimitru ,

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

Thanks and Best Regards,
Manu

[dr-dimitru]

@manusharma1 waiting for update in this from your end

[dr-dimitru]

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

[manusharma1]

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]

@manusharma1 just keep me updated.

[manusharma1]

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:[email protected]
ostrio:[email protected]
ostrio:[email protected]
ostrio:[email protected]
ostrio:[email protected]

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]

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

[manusharma1]

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]

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

[manusharma1]

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]

@manusharma1 good to hear you. Thank you for update

[manusharma1]

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]

Hmmm... never faced it.

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

[manusharma1]

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]

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]

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]

@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]

HI @manusharma1 ,

Any good news on your end?

[manusharma1]

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]

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]

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]

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:

• Star on GitHub
• Star on Atmosphere
• Share on Facebook and Twitter
• Donate via PayPal