npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

razor-fileupload

v1.2.0

Published

File upload logic for saving file to file system or uploading to S3

Downloads

2

Readme

razor-fileupload

This package wraps up logic required to work with uploading and downloading of files to the nodejs server. The package supports saving files to the local file system or to S3

How to use the package

  1. Create a new Express service and add a new route that will accept the files embedded in the request.
  2. Install the npm package:
    npm install razor-fileupload --save
  3. Add an import inside the router class:
    import {FileUploadManager,PersistTypes} from "razor-fileupload";
  4. Create a new instance of the file upload manager:
    let manager = new FileUploadManager();

Uploading a file or list of files

Use the 'FileUploadManager.uploadFiles' method to upload the files

There are minor differences in the uploadFiles methods when saving to the local files system vs saving to S3

Return value

If upload succeeded the result from the upload manager will be:

{
    files:IFileMetadata[],
    reqestMetadata:any
}

A single file metadata will include the following fields:

{
    id?:number
    fileName:string,
    fileExtension?:string,
    fileUniqueName:string,
    fileUrl?:string
}

Sending metadata with the files

It is useful to send metadata with the files uploaded. In order to send a single field that contains additional metadata add to your forms a field named 'data' and inside insert a json that is parsed to a string. Here is a code sample of the client side:

const formData: FormData = new FormData();
//Append the files to the form data
for (let i = 0; i < files.length; i++) {
    formData.append(i.toString(), files[i], files[i].name);
}
//append additional data 
formData.append("data", JSON.stringify(data));

The FileUploadManager will return the data inside the reqestMetadata result field

Upload to the local file system

When saving to the local file system the following params are required inside the uploadFiles method:

  1. req - The Express request containing the embedded files
  2. persistType - use the PersistType enum for selecting PersistTypes.fileSystem
  3. dest folder - define the destination folder to save the files
  4. fileUrl (optional) - if you would like to access these files directly from the client, you need to pass the url path to the folder (e.g. http://localhost:3000/assests)

Note that you need to expose the 'assests' folder via express.static in order to access the files : app.use("/assests",express.static(clientPath));

Upload to S3

In order to use the aws-sdk you are required to supply several environment variables in order to identify your aws account:

  1. AWS_ACCESS_KEY_ID
  2. AWS_SECRET_ACCESS_KEY
  3. AWS_REGION - (e.g. eu-central-1)

If you do not have these keys then you can go to AWS Console and create them. After logging in to aws console go to 'IAM' service. Select 'Users' and open the 'security credentials' tab. Inside the 'access keys' paragraph you can create a new access key

Since the files are going to be saved in S3 bucket you need to create one or make a new one if one does not already exist.

If you want the image files to be accessed directly from S3 using a URL you need to make sure to make the bucket a public one for read

To use the uploadFiles methods for uploading to S3 set the following method params:

  1. req - The Express request containing the embedded files
  2. persistType - use the PersistType enum for selecting PersistTypes.s3
  3. bucketName - the name of the bucket to save to
  4. fileUrl (optional) - if you would like to access these files directly from the client or browser, you need to pass the url path to the bucket (e.g. https://s3.eu-central-1.amazonaws.com/mycompnay.test.public/)

Note - if you do not know the full AWS path, go into the AWS console and open the s3 service. Open the bucket and then click a file that you have uploaded. The detailed page will display the link to file at the bottom of the page

The git project contains a full sample of a an Express server that uses the razor-fileupload package. The tester is linked to the package so make sure to use the npm link or if you are not familiar just add the package using npm install.

NOTE - make sure to set the environment params in file config/.env

Deleting a file

To delete a file use the 'FileUploadManager.deleteFile' method giving it the unique file name that was created during the file save and the storage location

Deleting from local file system

When deleting from local file system the second method param is the folder location of the saved files

Deleting from S3

When deleting from S3 the second method param is the name of the bucket