• 🏡 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

Come diventare un bravo data scientist | Consigli Italiano

Ottobre 11, 2019
build-recommendation-system-python-data-science-machine-learning

Build Recommendation System Python | Project Ideas Overview

Novembre 19, 2019
dialogflow-tutorial-chatbot-ai-guida-italiano-mailchimp-api-add-user-mail-list

Dialogflow Tutorial: Chatbot & Mailchimp Api

Novembre 9, 2019
Next Post
Previous Post

Una pubblicità che non vedi se usi AdBlock

EXPAND YOUR KNOWLEDGE

  • Blockchain Developer

    Circuito aritmetico

    Novembre 1, 2022
  • machine-learning

    Un nuovo inizio

    Settembre 4, 2021
  • Zero Knwoledge Proof Article Privacy Preserving

    Zero Knowledge Proof: zk-SNARK e zk-STARK | Prova a conoscenza zero

    Luglio 8, 2021
  • oblivious-transfer-spiegazione-italiano-ot-explanation Privacy Preserving

    Oblivious Transfer (OT)

    Luglio 6, 2021
  • Aleo Studio Website Preview machine-learning

    Aleo Studio: un IDE per Zero-Knowledge Proofs Applications

    Luglio 1, 2021
  • privacy-enhancing-technologies-data-machine-learning-data-science Privacy Preserving

    Perché il Privacy Tech è un vantaggio competitivo micidiale

    Giugno 17, 2021
  • bloom-filter-spiegazione-italian Privacy Preserving

    Bloom Filter

    Giugno 3, 2021
  • trusted-execution-environment-tee-data-science-come-fuziona Data Science, Privacy Preserving

    Trusted Execution Environment | Cos’è un TEE?

    Giugno 2, 2021
  • Crypto Custody services machine-learning

    Crypto Custody: Guida alla custodia delle criptomonete

    Maggio 26, 2021
  • deep-q-learning-q-learning-reinforcement-learning machine-learning

    Deep Q-Learning

    Aprile 27, 2021

Quello che Google pensa ti possa piacere

Prodotti che i Cookie dicono potresti trovare interessanti

AI Blog - © 2019-2021 Andrea Provino