Hi, is there a guide that instructs WIX users how to create a webpage that uploads directly to AWS S3?
Use the search function in this forum as there has been previous posts about using AWS which could help with what you are looking to do.
There is no Wix guide to working with AWS, unless somebody has shown a working version of their code in a previous post here.
I would also suggest that you contact their own support directly and ask them as well.
This is two years old now, however still worth a read as it gives you another option of using the Get Files to Dropbox upload option instead if you can’t get this to work…
https://forums.aws.amazon.com/thread.jspa?threadID=293030
https://support.wix.com/en/article/adding-and-setting-up-the-get-files-to-dropbox-app
If you do want to go through code, then I would suggest that you look into usingthe ‘upload-files-to-aws’ node JS for this which was just recently added.
https://support.wix.com/en/article/corvid-managing-external-code-libraries-npm-with-the-package-manager
Hi GOS, thanks for your help.
I have tried looking for days on the forum and on by installing the node you suggested (I think that was the one I requested a few days ago), however, I was looking for a walk through guide as my knowledge of APIs and linking to external sites/storage is very limited.
I will continue to explore the internet on this one, thanks for your response. (I will also look into the dropbox method)
Thanks,
If you are looking for something like the Wix API Reference but for third party providers like with their nodeJS, then unfortunately you are not going to get a complete integration instructions for adding it to every platform including Wix.
As stated in the Wix Package Manager you will need to refer to the companies own documents for help with using their nodeJS within Wix.
https://support.wix.com/en/article/corvid-using-external-code-libraries-from-npm
I know how you could upload to s3 if you are still need to do so.
I need to upload to s3 and could use some help.
Do you need to upload from an input button or from a database?
Input button. I am a book manufacturer. www.familyheritagepublisher.com when placing my order to the production plant I need to upload PDF files to S3 AWS so they have access to the files for production. Currently I’m using AWSCLIV2 creating a commands from an input button then copy and paste to a cmd line. Would like to upload with the push of a button.
How big will the pdf files be?
Anywhere from a few KB to several MB. They currently reside on my Onedrive.
Bigger than 6MB?
Often yes.
In that case you will need to use multipart upload code. Are you all right with using an HTML element?
Yes, I can use an HTML element
Have you set up an IAM user in AWS?
Yes
Great. I shall get the code I use and post it here.
That would be awesome…
Give this a try: Add in your bucket name, region and IAM keys. It is best to story your IAM keys in the site back end and send them into the HTML element for security.
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js">
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
function Add(Amount) {
document.getElementById("Process1").value = document.getElementById("Process1").value + Amount
console.log(document.getElementById("Process1").value)
Counter = Counter + 1
} // End of Add
var Counter = 0
var ToCount = 0;
function Send(BUCKET_NAME, IAM_USER_KEY, IAM_USER_SECRET) {
var files = document.getElementById('fileUpload').files;
let FILE = files[0]
uploadToS3(FILE)
function uploadToS3(File) {
let s3bucket = new AWS.S3({
endpoint: 's3-REGION.amazonaws.com',
signatureVersion: 'v4',
region: 'REGION',
accessKeyId: IAM_USER_KEY,
secretAccessKey: IAM_USER_SECRET,
Bucket: BUCKET_NAME
});
var startTime = new Date();
var partNum = 0;
var partSize = 1024 * 1024 * 5; // Minimum 5MB per chunk (except the last part) http://docs.aws.amazon.com/AmazonS3/latest/API/mpUploadComplete.html
var numPartsLeft = Math.ceil(FILE.size / partSize);
var numPartsLeftFixed = numPartsLeft
var Hundred = (numPartsLeft * 2) + 1
var PartLength = 100/Hundred
ToCount = Hundred
var PartsLength = 0;
var maxUploadTries = 3;
var multiPartParams = {
Bucket: BUCKET_NAME,
Key: KEY,
ContentType: 'application/pdf'
};
var multipartMap = {
Parts: []
};
function completeMultipartUpload(s3bucket, doneParams) {
s3bucket.completeMultipartUpload(doneParams, function(err, data) {
if (err) {
console.log("An error occurred while completing the multipart upload");
console.log(err);
} else {
var delta = (new Date() - startTime) / 1000;
console.log('Completed upload in', delta, 'seconds');
console.log('Final upload data:', data);
Add(PartLength)
}
});
}
function uploadPart(s3bucket, multipart, partParams, tryNum) {
tryNum = tryNum || 1;
s3bucket.uploadPart(partParams, function(multiErr, mData) {
if (multiErr){
console.log('multiErr, upload part error:', multiErr);
if (tryNum < maxUploadTries) {
console.log('Retrying upload of part: #', partParams.PartNumber)
uploadPart(s3bucket, multipart, partParams, tryNum + 1);
} else {
console.log('Failed uploading part: #', partParams.PartNumber)
}
return;
}
multipartMap.Parts[this.request.params.PartNumber - 1] = {
ETag: mData.ETag,
PartNumber: Number(this.request.params.PartNumber)
};
console.log("Completed part", this.request.params.PartNumber);
console.log('mData', mData);
Add(PartLength);
if (--numPartsLeft > 0) return; // complete only when all parts uploaded
var doneParams = {
Bucket: BUCKET_NAME,
Key: KEY,
MultipartUpload: multipartMap,
UploadId: multipart.UploadId
};
console.log("Completing upload...");
//Add(PartLength);
completeMultipartUpload(s3bucket, doneParams);
//Add(PartLength);
});
}
// Multipart
console.log("Creating multipart upload for:", In.name);
s3bucket.createMultipartUpload(multiPartParams, function(mpErr, multipart){
if (mpErr) { console.log('Error!', mpErr); return; }
console.log("Got upload ID", multipart.UploadId);
// Grab each partSize chunk and upload it as a part
for (var rangeStart = 0; rangeStart < FILE.size; rangeStart += partSize) {
partNum++;
var end = Math.min(rangeStart + partSize, FILE.size),
partParams = {
Body: FILE,
Bucket: BUCKET_NAME,
Key: KEY,
PartNumber: String(partNum),
UploadId: multipart.UploadId
};
// Send a single part
console.log('Uploading part: #', partParams.PartNumber, ', Range start:', rangeStart);
uploadPart(s3bucket, multipart, partParams);
Add(PartLength);
} // End of for loop
});
}
}
</script>
<body>
<div>
<input type="file" id="fileUpload" accept=".mp4, .mpg">
</div>
<div>
<button class="button" onclick="ToSend()">Submit</button>
</div>
<progress max="100" value="0" id="Process1"></progress>
</body>
Thanks for replying to my post, this looks so useful. I hope with this I can restart the project I was working on:grin: