• 🏡 Home
  • 🚨 GDPR Compliant
  • ⚡️ Data Science
  • 📌 Machine Learning
  • 🔒 Privacy Preserving
  • 🏡 Home
  • 🚨 GDPR Compliant
  • ⚡️ Data Science
  • 📌 Machine Learning
  • 🔒 Privacy Preserving
Guide, Portfolio

Upload File AWS S3 with Node, React, Mongo (Multer S3) | Guida Italiano

Upload File AWS S3 with Node, React, Mongo (Multer S3) | Guida Italiano

I tuoi problemi nel caricare un file su un bucket di Amazon, con il servizio AWS S3, usando un server Node e un fron-end React sono finalmente terminati: oggi ti presento la soluzione!

Quick Brief

Il nostro faraway goal è creare una piattaforma per l’acquisto e la gestione di corsi online.

Abbiamo identificato gli elementi chiave per la realizzazione del progettto, e creato un sistema per il login delgi utenti. Siamo quindi passati alla gestione delle transazioni con Stripe, e messo in secondo piano l’upload dei file.

Ora riprendiamo in mano il progetto e vediamo come gestire l’Upload file AWS S3, così da poterli facilmente visualizzare con un public url.

Project Goal

Al termine di questo progetto avremo:

  • front-end React con un semplice form per l’upload di uno o più file
  • back-end Node e MondoDB per l’upload handling e la visualizzazione dei file caricati
  • RESTful api per l’upload generico dei file e per la creazione di un prodotto da vendere

Prerequisiti

  • account AWS atttivo e funzionante
  • back-end node configurato (express, body-parser, cors, helmet, dotenv)
  • React app con router abilitato

Crezione Bucket S3

Il primo passo è accedere alla console AWS, navigare sul servizio S3 e creare un bucket: il nostro contenitore per i file.

Nel funnel di creazione dovremo prestare attenzione ad alcune cose:

  • possiamo scegliere un quasliasi nome, purché non sia già in uso presso qualche altro utente AWS.
  • dobbiamo depennare “Block all public access” allo STEP 3, in caso sarà impossibile ottenere un public URL funzionante.

Creato il bucket, prima di procedere oltre è necessario accedere alle KEY di Amazon.

In altro a destra, con un hover sul nostro nome utente si apre un dropdown contenente la voce “My Security Credential”, l’unica di nostro interesse. Clicchiamoci.

You are accessing the security credentials page for your AWS account. The account credentials provide unlimited access to your AWS resources.

Il disclaimer di AWS è sufficientemente diretto. Attento all’uso che ne fai delle credenziali che andrai a creare: condividile attentamente.

Apriamo il collapse Acces keys (acces key ID and secret access key), quindi seguiamo la procedura guidata per la creazione delle chiavi.

Andiamo quindi ad integrarle nel nostro file .env, RISPETTANDO IL NOME FORNITO:

AWS_ACCESS_KEY_ID=****
AWS_SECRET_ACCESS_KEY=****
AWS_REGION=****
S3_BUCKET=api-monolith 

Node Back-End | Handling S3 Upload File RESTfully

Abbiamo bisogno di alcuni pacchetti:

npm i aws-sdk, multer, multer-s3

Definiamo una rotta per l’upload dei file. In questo momento lavoro alle API V1, quindi quella completa sarà:

localhost:8001/V1/uploadfile
const express = require('express')
const router = express.Router()

// import controller
const ctrl = require('./utils.controller')

//define utils routes
router.route("/uploadfile")
    .post(ctrl.uploadFile) //post route

module.exports = router

All’interno del file utils.controller.js andiamo a gestire le funzioni, che saranno in grado fare l’upload su S3 con Node di file multipli.

Inziamo ad importare i pacchetti che gestiranno l’upload:

// handling mutlipart form-data
const multer = require('multer')
// avoid caching data
const multerS3 = require('multer-s3')
// aws istance (automatic config from .env file)
const AWS = require("aws-sdk")
// set s3 istances (again, automatic config from .env file)
// consider the fact that we will overwrite this configuration
const s3 = new AWS.S3()

Quindi procediamo a definire ed esportare il nostro middleware:

// at this point upload and handleUpload have to be defined
const uploadMiddleware = [upload.array("file"), handleUpload]

module.exports = {
    uploadMiddleware
}

Ora creiamo una nuova istanza di multer:

const upload = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'api-monolith', // need to specify bucket
        acl: 'public-read', // set to public-read otherwise get XML file
        contentType: multerS3.AUTO_CONTENT_TYPE, // get content-type
        key: function (req, file, cb) {
            /*
            * Define the fileName
            * Can be custom, the same, or hybrid:
            */
            const fileName = (Date.now() + "-" + file.originalname)
            cb(null, fileName)
        }
    })
})

Ora la inviamo una risposta al client contenete i ref ai file appena caricati:

const handleUpload = (req, res) => {
    // get files location:
    const locations = req.files.map((item) => item.location)
    res.send({
        message: 'Successfully uploaded  files!',
        files: locations
    })
}

Et voilà backend configurato.

Si è acerbo, ma funziona!

Basterebbe implementare qualche controllo aggiuntivo e un corretto sistema di gestione degli errori. Prossimamente!

React: aws s3 form upload

Gestendo l’intero processo da back-end, il front-end si limita a passare i file binari.

Installiamo la librerie axios, per gestire agevolmente l’upload dei file :

npm i axios

Quiindi definiamo un input mutliple:

<div>
    <h1>Upload File Form</h1>
    <input multiple type="file" name="file" onChange={this.onChangeHandler} />
    <button type="button" className="btn btn-success" onClick={this.onClickHandler}>Upload</button>
</div>

E ora le funzioni:

 constructor(props) {
        super(props)
        this.state = {
            selectedFile: null
        }
    }
    onChangeHandler = (event) => {
        this.setState({
            ...this.state,
            selectedFile: event.target.files,
        })
    }
    onClickHandler = (event) => {
        const data = new FormData()
        for (var x = 0; x < this.state.selectedFile.length; x++) {
            data.append('file', this.state.selectedFile[x])
        }
        // POST url
        axios.post("http://localhost:8001/v1/uploadfile", data, { // receive two parameter endpoint url ,form data 
        })
            .then(res => { 
                // then print response status
                console.log(res.statusText)
            })
            .catch(err => {
                console.log(err)
            })
    }

Tanto margine di implementazione, ma per il momento possiamo considerarci soddisfatti!

In un futuro update, aggiungeremo il supporto a mongo DB!

Un caldo abbraccio, Andrea!

Written by Andrea Provino - Ottobre 15, 2019
Tags | guida, portfolio project, web development

You Might Also Like

MAX Image Segmenter Web App | Log

Ottobre 18, 2019
dialogflow-tutorial-chatbot-ai-guida-italiano-mailchimp-api-add-user-mail-list

Dialogflow Tutorial: Chatbot & Mailchimp Api

Novembre 9, 2019

R for Data Science | Comandi utili RStudio

Gennaio 9, 2019
Next Post
Previous Post

Una pubblicità che non vedi se usi AdBlock

EXPAND YOUR KNOWLEDGE

  • fully-homomorphic-encryption-crittografia-completamente-omomorfica Privacy Preserving

    Cos’è la Crittografia Omomorfica | Homomorphic Encryption (HE)

    Marzo 4, 2021
  • data-science-for-finance-machine-learning-deep-learning-data-science-use-cases-use-cases Business, Data Science, machine-learning

    Data Science for Finance | Use Cases per il Data Scientist

    Febbraio 13, 2021
  • differential-privacy-example-privacy-differenziale-esempio-italiano-applicazioni-reali Business, Data Science, Privacy Preserving

    Differential Privacy Example | Esempi di privacy differenziale

    Febbraio 10, 2021
  • privacy-enhancing-technologies-techniques-machine-learning-data-science-pets-guida-italiano-spiegazione-semplice Business, Data Science, machine-learning, Privacy Preserving

    Cosa sono le Privacy-enhancing technologies o techniques (PETs)

    Febbraio 7, 2021
  • condivisione-dati-finance-fintech-problems-machine-learning-for-finance-data-science-deep-learning-case-study Business

    Problemi della condivisione dati in finanza | Finance data sharing problems

    Febbraio 4, 2021
  • finance-privacy-settore-finanziario-dati-privacy-enhancing-technologies-ai Business

    Il legame tra Privacy Dati AI nel settore finanziario

    Febbraio 1, 2021
  • rust-react-webassembly-privacy-preserving-machine-learning Logs

    Rust, WebAssembly, React e un MVP

    Dicembre 21, 2020
  • diffie-hellman-key-exchange-protocol-scambio-di-chiavi-diffie-hellman Data Science, Privacy Preserving

    Cos’è lo scambio di chiavi Diffie-Hellman (DH)? | Privacy Preserving

    Dicembre 15, 2020
  • principio-di-esattezza-data-science-machine-learning-gdpr-data-accuracy Data Science, GDPR Compliant

    GDPR: Principio di esattezza dei dati (Data Accuracy)

    Dicembre 12, 2020
  • tensorflow-extended-tfx-deploy-machine-learning-guide-machine-learning-pipelines machine-learning

    TFX: come funziona Tensorflow Extended?

    Dicembre 9, 2020

Quello che Google pensa ti possa piacere

Prodotti che i Cookie dicono potresti trovare interessanti

AI Blog - © 2019-2021 Andrea Provino