By Alex Mungai Muchiri, Alibaba Cloud Tech Share Author. Tech Share is Alibaba Cloud's incentive program to encourage the sharing of technical knowledge and best practices within the cloud community.
Alibaba Cloud Object Storage Service (OSS) is an easy-to-use service that enables you to store, backup and archive large amounts of data on the cloud. OSS acts as an encrypted central repository from where files can be securely accessed from around the globe. OSS guarantees up to 99.9% availability and is a perfect fit for global teams and international project management.
Therefore, if you plan to store large amounts of unstructured data such as audio, images, text, and PDFs, OSS is the right service for you. Alibaba Cloud allows you to login to your Object Storage Service to upload content, organize and also delete unwanted files. The service is accessible through a control panel or through APIs. This tutorial examines how we could use Node.js to upload content to Alibaba Cloud Object Storage Service from a web application.
For you to follow through with this tutorial you will require the following:
In summary, you will require an Alibaba Cloud account, Object Storage Service, Node.js, npm and access keys to your OSS service.
To begin with, the Alibaba Cloud OSS supports RESTful API operations and SDKs for most languages. In this tutorial, we are going to use the open-source OSS JavaScript SDK for node.js. We need to first install the ali-oss like so:
npm install ali-ossNoteworthy, there are two modes that you can choose from; synchronous and asynchronous modes.
To use in synchronous mode, you may additionally use it in conjunction with co. Install co like so:
npm install coThe asynchronous mode supports callback.
This method is applied in the synchronous mode. It involves creating an object app.js like so
var co = require('co');
var OSS = require('ali-oss');
var client = new OSS({
region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>'
});On Alibaba Cloud the region field is very important since you had to specify a region ad you subscribed to the OSS service e.g. oss-cn-hangzhou. Here is a complete list of OSS Nodes.
Additionally, there are some endpoints that may not be in the OSS Nodes list, in which case, you should make the following parameters:
Looks all good, now to the next step.
In this step we shall install node.js dependencies so that we can have a directory where our node application will be located. For purposes of this tutorial, we create our app in OSS-node-app like so:
mkdir sites/OSS-node-app && cd sites/OSS-node-appNext, we shall create a package.json file and paste the code below in it:
{
"name": "OSS-node-app",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"license": "MIT"
}In the sample above, we have created a package.json file that states the name, version and licence of our app. The scripts parameter enables running of a node server using npm start as opposed to node server.js.
All dependencies that need to be installed will be installed using npm install command. It will then be followed by four dependencies, which will be installed in this project like so
npm install ali-oss express Our dependencies enable us to work with OSS APIs, launch a web server and handle file uploads. The command above also updates the package.json.
Our project location and dependencies are all set up, so we can now proceed to fire up our server and set up front-end views. Do note that all dependencies are saved to the package.json file by default in all later Node.js versions.
We shall begin by creating files for the public views of our application, which is what will be visible by users. We are going to create a public folder using index.html, success.html, and error.html. Our three files shall have the HTML skeleton indicated in the below, only with different content. In all the files, paste the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OSS Node Tutorial</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!—your content here -->
</body>
</html>Proceed to write an error message in the respective file like so:
<h1>Something went wrong!</h1>
<p>Uploading the file was unsuccessful.</p>Proceed to write the success message in the respective file like so:
<h1>Success!</h1>
<p>File uploaded successfully.</p>Now we shall create HTML form with multipart/form-data in the index.html. The form shall have a submit button as well.
<h1>OSS Tutorial</h1>
<p>Please select a file and submit form to upload.</p>
<form method="post" enctype="multipart/form-data" action="/upload">
<label for="file">Upload a file</label>
<input type="file" name="upload">
<input type="submit" class="button">
</form>Now, we shall create style.css to make the interface easy to read:
html {
font-family: sans-serif;
line-height: 1.5;
color: #333;
}
body {
margin: 0 auto;
max-width: 500px;
}
label,
input {
display: block;
margin: 5px 0;
}We have successfully created the file for uploading, the success and error pages our Node.js application.
We are going to wet up a node.js server using the Express framework. To begin with, create a server.js file in the project's root directory. We then need to use require() to load the four dependencies and then route the app through Express's app instance like so:
server.js
// Load dependencies
const ali = require(ali-oss');
const express = require('express');
const app = express();Since the application's front end is located in the public repository, dependencies configurations shall then set as follows:
// Views in public directory
app.use(express.static('public'));Then, proceed to route the three files relative to the server root
// Main, error and success views
app.get('/', function (request, response) {
response.sendFile(__dirname + '/public/index.html');
});
app.get("/success", function (request, response) {
response.sendFile(__dirname + '/public/success.html');
});
app.get("/error", function (request, response) {
response.sendFile(__dirname + '/public/error.html');
});Now, we need to set the port to use for listening, in this case 5000 or any other available port
server.js
app.listen(5000, function () {
console.log('Server listening on port 5000.');
});Save this and start the server using npm start.
npm start
Output
> node server.js
Server listening on port 5000.If you type in http://localhost:5000, in the address bar of your browser, you should be able to access the upload form. Also, try to access http://localhost:5000/success and http://localhost:5000/error to test their response.
Our server is all set up, so we shall then integrate our form to ali-oss to enable us upload our first file to the Alibaba OSS.
server.js
const app = express();
// Set endpoint to Alibaba OSS
const spacesEndpoint = new OSS.Endpoint(' http://oss-cn-hangzhou.aliyuncs.com.');
const s3 = new OSS({
endpoint: spacesEndpoint
});We need to use new OSS() to connect to the OSS client:
In this first instance, we have a simple local file upload implemented like so:
var co = require('co');
var OSS = require('ali-oss')
var client = new OSS({
region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'
});
co(function* () {
var result = yield client.put('object-key', 'local-file');
console.log(result);
}).catch(function (err) {
console.log(err);
});In a second instance we use the stream upload accessed using the putStream interface. Any objects with an inherent Readable Stream is enabled in this method (both object and network stream). The SDK automatically initiates chunked encoding HTTP PUT when the putStream interface is used.
var co = require('co');
var OSS = require('ali-oss');
var fs = require('fs');
var client = new OSS({
region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'
});
co(function* () {
// use 'chunked encoding'
var stream = fs.createReadStream('local-file');
var result = yield client.putStream('object-key', stream);
console.log(result);
// do not use 'chunked encoding'
var stream = fs.createReadStream('local-file');
var size = fs.statSync('local-file').size;
var result = yield client.putStream(
'object-key', stream, {contentLength: size});
console.log(result);
}).catch(function (err) {
console.log(err);
});Uploading object content in the buffer is accessed through the put interface:
var co = require('co');
var OSS = require('ali-oss');
var client = new OSS({
region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'
});
co(function* () {
var result = yield client.put('object-key', new Buffer('hello world'));
console.log(result);
}).catch(function (err) {
console.log(err);
});If you are uploading a very large file, multipartUpload interface is able to divide a request into smaller executable requests. The advantage of the method is that you only have to upload failed parts as opposed to revising the entire file. Use the parameters below:
var co = require('co');
var OSS = require('ali-oss')
var client = new OSS({
region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'
});
co(function* () {
var result = yield client.multipartUpload('object-key', 'local-file', {
progress: function* (p) {
console.log('Progress: ' + p);
}
meta: {
year: 2017,
people: 'test'
}
});
console.log(result);
var head = yield client.head('object-key');
console.log(head);
}).catch(function (err) {
console.log(err);
});The progress parameter above is a calback function to obtain progress of the upload.
var progress = function (p) {
return function (done) {
console.log(p);
done();
};
};Congratulations, you have made it to the end. We have successfully set up an Express application to upload objects to our Alibaba Cloud Object Storage Service (OSS) space! Don't have an Alibaba Cloud account? Sign up for an account and try over 40 products for free worth up to $1200. Get Started with Alibaba Cloud to learn more.
Alibaba Clouder - May 6, 2019
Alibaba Clouder - January 30, 2019
Alibaba Clouder - May 6, 2019
Alibaba Clouder - April 30, 2019
hyj1991 - June 20, 2019
hyj1991 - July 22, 2019
wow this is a good tutorial.. but I want to know can we use another method like DELETE? and if it possible, is that parameter to send same like PUT method?
wow this is a good tutorial.. but I want to know can we use another method like DELETE? and if it possible, is that parameter to send same like PUT method
Storage Capacity Unit
Plan and optimize your storage budget with flexible storage services
Learn More
YiDA Low-code Development Platform
A low-code development platform to make work easier
Learn More
mPaaS
Help enterprises build high-quality, stable mobile apps
Learn More
Hybrid Cloud Storage
A cost-effective, efficient and easy-to-manage hybrid cloud storage solution.
Learn MoreMore Posts by Alex
Raja_KT March 2, 2019 at 4:28 am
Good one. Express is really express :)