Uploading frontend files

Clase 32 de 54 • Full Stack JavaScript with Sails.js

Rajavanya Subramaniyan

student•

To anyone using VSCode and if you receive an error - Thing.create is not a function. Check your first line of the upload-thing action and you might find an autogenerated import inserted by the IDE. Delete it. It will work. I wish there was a way to disable this permanently.

Babatunde Mattieu

student•

I do not want to send my file into the tmp folder,I want it to go into the assests/image foleder. I used the conventional way and it worked, now i want to use the sails.uploadOne(inputs.photo) method…How do I specify the folder path then set max size for the image upload…I look forward to hearing fromyou. Thanks

Babatunde Mattieu

student•

Pass in your path to the uploadOne as the second arg after inputs.photo…pass an object holding your path and maxByte.

Mike USA

student•

According to the hook source (https://github.com/sailshq/sails-hook-uploads/blob/master/index.js)

It seems like you could do something like:

sails.uploadOne( inputs.photo, { dirname: '/choose/your/path' });

I didn't see anything about a maxByte, but I didn't look too closely.

lawford campbell

student•

Im having issues with displaying the image after it has been uploaded.
I can Upload the file to th .tmp/uploads folder
and it saves the correct image path in the database
Where in the videos is this ?

Mike USA

student•

I think at 12:36 this is what Mike means by, "for our next video, we're going to look at how we get the file downloads back from the server." So, look at the next video and you should discover how to retrieve that image :)

Babatunde Mattieu

student•

How can I check for the MimeType before I upload the file to my assets folder. Here is my code…please help me point out what i am doing wrong. My code seem to be checking the mimetype after the file has been uploaded. i CONSOLE log inputs.file, i got an [Object object] in return. now i am unsure of how to check the mime type to allow only image/jpg, image/jpeg, image/png

fn: async function (inputs, exits) {

    
    var util = require('util');
    // let setPerm = `sudo chown -R 503`;


    let uploadDestination = 'assets/articles';

    //Create Upload Path
    uploadPath = require('path').resolve(sails.config.appPath,  `${uploadDestination}`);
  
    // Upload the image.
    var info = await sails.uploadOne(inputs.photo, {
      maxBytes: 9000000,
      dirname: path
    })
    // Note: E_EXCEEDS_UPLOAD_LIMIT is the error code for exceeding
    // `maxBytes` for both skipper-disk and skipper-s3.
    .intercept('E_EXCEEDS_UPLOAD_LIMIT', 'tooBig')
    .intercept((err)=>new Error('The photo upload failed: '+util.inspect(err)));


    //If there is no file attached throw noFileAttached Error
    if(!info) {
      throw 'noFileAttached';
    }

     //  Set permitted MimeTypes
    //  var isAllowedMimeType = ["image/jpeg", "image/jpg", "image/png"];

      if(!isAllowedMimeType.includes(info.type))
     {
       console.log(`File has ${info.type}`);
     return exits.invalidMimeType({
         statusCode: 400,
         message: 'Unsupported File Type',
       });
      } 


    
      var uploadFilePath = info.fd;
      var getUploadedFileName = uploadFilePath.split("/");
      var uploadFileName = getUploadedFileName[getUploadedFileName.length - 1]

        var article = await Article.create({
          uploadFilePath : info.fd,
          uploadFileName : info.filename,
          author: this.req.session.userId
        }).fetch();

        return exits.success({
          statusCode: 200,
          message: ' New Article with file uploaded successfully!',
          uploadInfo: article
        });

    

  
    

    

  }

Mike USA

student•

I'm not sure the best way to accomplish what you're asking. It sounds like you want to scan the file type before you have uploaded it. Someone correct me if I'm wrong, but I think the Skipper/uploadOne handles the stream and the file's MIME type metadata may not be available as part of the stream. My guess is the stream is just a multipart message, until it has be packaged on the server.

Below I'm including one possible way to address this by capturing the data on the client side.

1. Update Page Action

To address this, you could attempt to pass along the type as an input from the client. Simply add imageType:'' property to your uploadFormData:{...} in your page action.

Then, still in the page action, inside the changeFileInput method, towards the bottom type:

this.uploadFormData.imageType = selectedFile.type;

2. Update Controller Action

First you will need to add a new string input to your controller action and call it what you did in the page action (above it is named imageType). Example:

inputs:{
  ...
  imageType: {
    type: 'string',
    description: 'MIME of image collected/passed from client'
  }
}

In your code above, before the uploadOne() is called. You can check for inputs.imageType against your allowed MIME types. And simply throw 'badRequest'; before uploadOne() is called.

Important!: Because you are relying on the client passing along this information, this could be a potential security risk. You should only use it to pre-detect bad MIMEs and then after it has uploaded, check it again (and delete if it is not suitable)

Comment: I imagine Sails/Skipper may have a way to detect the MIME from the stream, but I am not versed enough to know better -- again, those more knowledgeable should comment :)

Andrew Pea Shew Ther

student•

Hi Guys!!

has anyone managed to do an image resize before uploading it to sails.uploadOne?

It seems to only read an upstream object, but Sharp or IM needs an actual file..

Don't know if i'm going about this all wrongly

Uploading frontend files

Welcome to the course

Introduction and generalities

The technologies we are going to use

What we will build

Avoiding mistakes in our code

Github for our project

Installing platforms and dependencies

The essentials

Backend architecture

Frontend Architecture

ParasailsJS

Authentication and login

User Subscription

Sessions and Data Base

Password recovery

Email verification

Contact form

Managing payment information

Creating a new page

Making our page interactive

Creating a new model

Automatic testing

Creating a new action

Using Cloud SDK

Creating custom made functions

Personalization

Permissions

Friends with associations

Advanced queries and .populate

Modals

Ajax forms

Loading and error states

Putting it all together

Uploading backend file

Uploading frontend files

Downloading files

Your turn

Growth and monetization

Building a paywall

Recurrent payment subscriptions

Notifications

Invitations (Existing Users)

Invitations (New Users)

Unclaimed Accounts

Going live

SailsJS and NodeJS Settings

Application secutiry

Cloudflare and SSL Certifications

Using a platform as a service

Deploy to Heroku

Settings to send to production

Adding variables to Heroku

Data Base Settings

Before launching

Course Closure

Bonus content

Server-side rendering with EJS

Designing your frontend with Bootstrap 4

Understanding datastores

'Pure' APIs