1. Home
  2. Forum
  3. Vue
  4. How to use the URL to locate the filepath on an Azure blob storage

How to use the URL to locate the filepath on an Azure blob storage

I'm trying to use the Vue file manager component inside of my Laravel application and I was wondering if there would be a way to use the URL through either a method in Vue or as part of a middleware in Laravel to access a specific file that's accessed via the test ASP.NET MVC file provider that's connected to an Azure blob storage. I can't seem to find any references to how I can access a file outside of using the UI with the base component. Any suggestions would be helpful and if so any references to documentation would be greatly appreciated.

5 Replies
SP Sowmiya Padmanaban Syncfusion Team April 23, 2020 11:44 AM UTC

Hi Adam,  
 
We have checked your reported query. But unfortunately, we are unable to understand your exact requirement from your shared details. For your reference, we have prepared a sample for Vue FileManger with Azure MVC FileProvider. Refer the below sample link. 
 
 
 
Steps to run the service: 
1.      Clone or download the above service. Add your Azure blob path for RegisterAzure method in controller. Refer the below code snippet. 
operation.RegisterAzure("<--accountName-->", "<--accountKey-->", "<--blobName-->");             operation.setBlobContainer("<--blobPath-->", "<--filePath-->"); 
 
2.      And also add the blobpath and filepath inside the AzureFileOperations and AzureUpload method in controller. 
3.      After that run the Azure Service. 
4.      Add the service launched URL in above FileManager sample. 
 
let hostUrl = "http://localhost:62869/"; 
export default Vue.extend({ 
  data() { 
    return { 
      ajaxSettings: { 
        url: hostUrl + "api/FileManager/FileOperations", 
        getImageUrl: hostUrl + "api/FileManager/GetImage", 
        uploadUrl: hostUrl + "api/FileManager/Upload", 
        downloadUrl: hostUrl + "api/FileManager/Download" 
      }, 
      view: "Details" 
    }; 
  }, 
  provide: { 
    filemanager: [NavigationPane, DetailsView, Toolbar] 
  } 
}); 
 
 
Can you please share any of the following additional details regarding your requirement, it will help us to provide you the prompt solution. 
 
1.      Your requirement is to externally (For example: button click) trigger the Azure controller side methods (File operations, Upload methods.,) ? 
2.      If you want to access the particular file in Azure MVC File provider. (For example: want to display the file when double click the file) ?  
3.      Share the exact scenario. 
If possible, share us screenshot or video demo of your requirement. 
 
Refer the below links to know more about the FileManager component. 
 
 
 
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P 


AR Adam Ratcliffe April 23, 2020 04:20 PM UTC

Part of the project will need to have a way for a user to use a URL as a reference to a file stored on the Azure blob storage. The idea is that I'd take the URL (currently http://127.0.0.1:8000/file-manager) plus the file path on Azure and I'd use the path to show up on the front end but I can't seem to do this with an axios post based on the API documentation you've provided.
Vue Method:
getPathFromURL(){
        var read = {
          action: "read",
          path: "/",
          showHiddenItems: false,
          data: []
        }
        console.log(read);
        console.log(axios.get(http://localhost:57662/AzureProvider/AzureFileOperations, read));
      }
Is it also possible to use Postman to try calls to the file provider as test calls?

SP Sowmiya Padmanaban Syncfusion Team April 24, 2020 02:08 PM UTC

Hi Adam,  
We have checked your reported query. Yes, it is possible to call the server side method for File Manager’s file operation, separately apart from File Manager component. For your reference, we have trigger the read action of FileManager component in button click using ajax request. And also we print the read details in div element. 

Refer the below code snippet. 

  methods: { 
    SendRequest: function(args) {     
      var obj = { action: "read", path: "/", showHiddenItems: false, data: [] }; 
      // Send the ajax request to the server containing selected files. 
      $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify(obj), 
        dataType: "json", 
        success: function(data) { 
          console.log(data); 
          document.getElementById("value").innerText = data; 
        }, 
        error: function(xhr, err) {} 
      }); 
    } 
  }, 

Refer the sample link below. 


Could you please check and confirm whether your requirement met with this solution or not. 

Please let us know, if you need any further assistance. 

Regards,  
Sowmiya.P 


AR Adam Ratcliffe April 24, 2020 03:46 PM UTC

I've tried this however, I'm now receiving a CORS issue and I can't seem to find any documentation mentioning that there should be and headers attached to the API call. I'm using Google Chrome and I've tried using an extension to enable CORS which unfortunately hasn't been able to solve the issue, do you have any suggestions for solving this issue?
Error:
Access to XMLHttpRequest at 'http://localhost:57662/api/AzureProvider/AzureFileOperations' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

SP Sowmiya Padmanaban Syncfusion Team April 27, 2020 12:14 PM UTC

Hi Adam,  
 
We have checked your reported issue with FileManager service. To resolve this issue, you need to  enable the CORS in your MVC application. By default, the reported error because browser blocks the HTTP requests from different domains. 
 
Add the below code snippet in web,config file. 
 
<system.webServer> 
<httpProtocol> 
      <customHeaders> 
        <add name="Access-Control-Allow-Origin" value="*" /> 
        <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
      </customHeaders> 
    </httpProtocol> 
</system.webServer> 
 
 
Can you please ensure the above case. Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon