Integrate Vue.js project to store images in MS Azure cloud storage

I am currently exploring the VueJs framework and looking to integrate my project with Azure. However, I am unsure of the process. Previously, I worked with Firebase - is it a similar technique where we configure storage within the project?

Recently, I created a new blob and container in Azure, obtained a saskey, primary/secondary paths, but now I'm stuck on what to do next.

In my VueJs project, I have added the following code:

    var sasKey = '....'; //Code from Azure
    var blobUri = '...'; //Path
    var blobService = AzureStorage.createBlobServiceWithSas(blobUri, sasKey).withFilter(new AzureStorage.ExponentialRetryPolicyFilter());

      blobService.createBlockBlobFromText('ContainerName', 'BlobName', data,  function(error, result, response){
      if (error) {
          console.log('Upload failed, please check browser console for more information.');
          console.log(error);
      } else {
         console.log('Upload successful!');
      }
    });

To clarify, I am new to Vue.js and Azure. Please guide me on the correct steps to successfully upload an image to Azure storage.

Additionally, can we incorporate security headers like those used in Axios? For example, checking content-length, content-type, etc.

Whenever I run the program, it consistently displays:

Upload failed, please check browser console for more information.
Error: XHR error
    at XMLHttpRequest.xhr.onerror
javascriptazurevue.jsvuejs2

Answer №1

To begin, we must approve CORS for Azure storage by adjusting settings in the Azure portal:

https://i.sstatic.net/UjFfO.png

Check out this demonstration on how to upload a file to a blob using JavaScript:

var blobUri = 'https://' + 'STORAGE_ACCOUNT' + '.blob.core.windows.net';
var blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, 'SAS_TOKEN');
// If one file has been selected in the HTML file input element
var file = document.getElementById('fileinput').files[0];

var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
blobService.singleBlobPutThresholdInBytes = customBlockSize;

var finishedOrError = false;
var speedSummary = blobService.createBlockBlobFromBrowserFile('mycontainer', 
file.name, file, {blockSize : customBlockSize}, function(error, result, response) {
    finishedOrError = true;
    if (error) {
        // Upload failed
    } else {
        // Successfully uploaded
    }
});
refreshProgress();

For more detailed information: Explore the Azure Storage JavaScript Client Library Sample for Blob Operations

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VueJS Error: Unable to access the 'className' property of an undefined variable

I'm currently working on a menu design project where I need to highlight the active tab/page that the user is on by adding a color class and utilizing JavaScript to update the active link. Here's a snippet of my template: <div class="menu ...

javascriptcssvue.js

In Vue, props are not automatically assigned; be sure to avoid directly mutating a prop when assigning it manually to prevent errors

I am working with two Vue components: GetAnimal.vue and DisplayAnimal.vue. GetAnimal.vue sends a JSON object containing animal data to DisplayAnimal.vue using router push. DisplayAnimal.vue then displays this data. The process flow is as follows: I navigat ...

javascriptvue.jsvuejs2vue-router

Exploring promises with loops and patience?

I created a function that accesses an API and retrieves an array containing 100 objects at once. The getPageData() function works as expected when passing an integer without the loop. However, when attempting to iterate through it, I am not getting any res ...

javascriptloopsexpressasynchronousasync-await

Refining checkboxes with specific criteria

I am struggling with the following code: <form method="post"> <% for(let i = 0; i < websites.length; i++){ let website = websites[i]; %> <fieldset id="site<%= i %>" style="padding-bottom: 0; padding-top: 10p ...

javascriptnode.jsexpress

Exploring Vue's data binding with both familiar and mysterious input values

How can I model an object in Vue that contains both known and unknown values? The quantity is unknown, but the type is known. I need to present user inputs for each type, where the user enters the quantity. How should I approach this? data() { retur ...

javascripthtmlvue.jsdata-binding

javascript a loop through an array to reassign element ID's

Formulating a form with input elements that are utilizing a jquery datepicker is the current task at hand. Take a look at a snippet of the HTML code for these inputs: <td style="width:15%"><input type="text" name="datepicker" id="Tb3fromRow10"/&g ...

javascriptarraysloopsdatepicker

Why isn't res.send() in Node.js sending the message?

Despite numerous attempts, I am unable to send my response message. It was working briefly, but after some code changes, it stopped functioning. Can anyone provide a solution to this challenging issue? exports.listBoth = function(req, res) { ...

javascriptnode.jsexpressmongoose

Vue.js has mysteriously stopped functioning

My Vue.js project suddenly stopped working and I've been trying to figure out the issue for hours with no luck. Here's an overview of my HTML file which includes dependencies and a table displaying data from users. <!DOCTYPE html> <html ...

javascriptvue.js

The default expansion behavior of Google Material's ExpansionPanel for ReactJS is not working as expected

Currently, I am in the process of developing a ReactJS application that utilizes Google's Material-UI. Within this project, there is a child class that gets displayed within a Grid once a search has been submitted. Depending on the type of search con ...

javascriptreactjsmaterial-ui

Demonstrate the proper implementation of a Stepper component using Material UI in a React.js

I am trying to display a responsive screen using "progressive forms" with React.js and Material Ui. I have implemented the Stepper component for this purpose, but when I click the "Next Button", the button is hidden but the next step content with the text ...

javascriptreactjsmaterial-ui

Receiving corrupt files while pulling image data from node server (using gridfs-stream)

After conducting an extensive search on platforms like Stack Overflow and Reddit, as well as going through numerous related posts, I decided to share my experience. Even though it's been a bit of a struggle, I refuse to give up so easily :) The proce ...

node.jsmongodbvue.js

Using Twig path to pass Ajax URL parameter

I'm facing an issue in my Twig view when passing parameters in the AJAX URL path. Since Twig is executed before JavaScript, it doesn't recognize the input value passed as a parameter. Is there a way to solve this without passing the param in data ...

javascriptajaxsymfonytwig

How can we stop self shadowed faces from being illuminated?

Currently, I am working on creating a city scene in Three.js and experimenting with lighting and shadows. Specifically, I am focusing on a single building that was modeled in 3DS Max, then exported to OBJ format, and converted using a Python converter thro ...

javascriptthree.jslightingshadows

The AJAX response did not include the <script> element

Currently working on a WordPress theme where I am implementing AJAX to load new archive pages. However, encountering an issue where the entire block of Javascript code is not being included in the newly fetched content. Let's say, initially the struc ...

javascriptajaxwordpressscript-tag

Plan the timing of dispatch in the reducer

While solutions like redux thunk exist for dispatching actions asynchronously, I recently encountered a situation like the one below: import {store} from "./store"; const initialState = { todos: [] } ​ function todoApp(state = initialState, action) { ...

javascriptredux

Decrease the space between slide items by reducing margins or increasing their width

I'm having trouble achieving the desired spacing between items, I would like more space between each item but they are currently too close together. I am looking for a margin of 10px or a width of 32% for each item. I have already looked into some re ...

javascriptjqueryslick.js

Angular 7 error: No provider found for PagerService causing NullInjectorError

I have been struggling to get pagination working properly in my project. Below is the code I have written: pager.service.ts: import * as _ from 'underscore'; @Injectable({ providedIn: 'root', }) export class PagerService { ...

javascriptnode.jsangulartypescriptangular7

Implementing VisualCaptcha with AngularJS and slimPHP in a RESTful manner

I am currently using AngularJS on the frontend and SlimPHP on the backend with REST URLs. In an attempt to integrate VisualCaptcha, I followed the instructions on the PHP side and verified that it works. I have a simple Angular dataService that fetches t ...

javascriptphpangularjscaptchaslim

HTML filtering using the <select> element

Is there a way to implement this script for options instead of buttons? The goal is to filter the HTML section, but it seems to not work with <option> tags. Instead of displaying the all class, it shows nothing. CSS .show { display: block; } .filt ...

javascripthtmlcssbootstrap-5

What methods can I employ in Javascript to automatically display search results obtained from multiple HTTP search queries?

In my tampermonkey script, I am attempting to process an array of names by performing a search and printing the page for each one. The script runs automatically upon loading the page, hence the necessity of the if statement. $(document).ready(function(){ ...

javascriptjqueryarraystampermonkey