FileExplorer and PDFViewer with Azure Cloud Storage

Question

Hi all, I'm new with Essential Studio and i test it with the community license.I would have 2 questions:

1) Can I use the explorer file to display an Azure directory
containing Blob? If you like ?, to me as an error: The virtual
path relative path ‘www.x.xxx’ is not allowed here.

2) When I try to load a blob on the PDFViewer, I do not see
it. Are there any restrictions on communication with Azure Cloud Storage?

Thank you. 

Manuel

Karthik Ravichandran · Answer

Hi Manuel, 
 
Thanks for contacting syncfusion support. 
 
 
Query 1:  Can I use the explorer file to display an Azure directory containing Blob? If you like ?, to me as an error: The virtual path relative path ‘www.x.xxx’ is not allowed here. 
 
As per your requirement, we have provided “AzureFileOperations" class for handling file management related operations using Azure blob storage. This class is used to simplify the process on server side. It contains some built-in methods, which is used to handle file operations (like read, copy, move, delete, etc.) using blob storage.    
 
In view page, specify proper URL for “Path” and “AjaxAction” as specified below  
 




@*"https://filebrowsercontent.blob.core.windows.net/blob1/Content/"- Specifies the folder path of azure blob storage *@ 
@*"/FileExplorer/FileActionDefault"- Specifies the URL of Ajax handling method, which is defined at controller part *@ 
@(Html.EJ().FileExplorer("fileExplorer") 
    .FileTypes("*.png, *.gif, *.jpg, *.jpeg, *.docx") 
    .Path("https://filebrowsercontent.blob.core.windows.net/blob1/Content/") 
 
    .AjaxAction(@Url.Content("/FileExplorer/FileActionDefault")) 
 
    .Width("900px") 
 
    .Height("400px") 
 
    .Layout(LayoutType.LargeIcons) 
    ) 
 
In controller part, you have to create object for” AzureFileOperations" class as shown in below code example also specify path of azure blob storage.  
 




//Please specify the path of azure blob 
string startPath = "https://filebrowsercontent.blob.core.windows.net/blob1/"; 
 
//Here you have to specify the azure account name, key and blob name 
AzureFileOperations operation = new AzureFileOperations("filebrowsercontent", "rbAvmn82fmt7oZ7N/3SXQ9+d9MiQmW2i1FzwAtPfUJL9sb2gZ/+cC6Ei1mkwSbMA1iVSy9hzH1unWfL0fPny0A==", "blob1"); 
 
After creating object for “AzureFileOperations” class in controller part. Based on the file operation type, we will call the corresponding built-in file operation handling methods, which are available in “AzureFileOperations” class.  
 
We have prepared the sample based on this and you can get it from the below link 
 
Sample 
 
Query 2: When I try to load a blob on the PDFViewer, I do not see it.  
 
We can load the PDF documents as either stream or byte array in the PDF viewer control from the web API controller(server side). Once we retrieve the blob content of the PDF document from the Azure blob storage, we can convert the blob into a stream or byte array and it can be loaded in the PDF viewer control. Please find the code snippet for converting the blob content to stream below.  
 
Code Snippet:  
              CloudBlobContainer _cloudBlobContainer = _blobClient.GetContainerReference(_containerName);  
CloudBlockBlob _blockBlob = _cloudBlobContainer.GetBlockBlobReference("HTTP Succinctly.pdf");    
MemoryStream memoryStream = new MemoryStream();   
_blockBlob.DownloadToStream(memoryStream) 
 
 
Please let us know if you need further assistance on this 
 
Regards, 
Karthik R

Manuel · Answer

Thanks for reply, i solved for the file Explorer but how can pass the strem of pdf from controller to view?

Controller:

MemoryStream ms = new MemoryStream();
blob.DownloadToStream(ms);
ViewData["BlobStream"] = ms;

View:

@(Html.EJ().PdfViewer("pdfviewer").ServiceUrl(ViewData["BlobStream"].ToString())
.PdfService(Syncfusion.JavaScript.PdfViewerEnums.PdfService.Remote))

The pdf don't render.

Thanks in advance.

Karthik Ravichandran · Answer

Hi Manuel, 
 
 
Thanks for your update. 
 
 
We cannot pass the stream to the serviceUrl property of the PDF viewer control. The serviceUrl property is used to set the URL of the web API controller which is hosted. When the web API controller is used the PdfService property should be “Local”. Please find the code snippet for initializing the PDF viewer control in the view page below.  
 
Code Snippet:  




@(Html.EJ().PdfViewer("pdfviewer").ServiceUrl(“../api/PdfViewer”).PdfService(Syncfusion.JavaScript.PdfViewerEnums.PdfService.Local))  
  
// Where “PdfViewer” in the code snippet is the web API controller(PdfViewerController).  
  
 
After retrieving the blob content from the Azure blob storage we should convert it into stream and it can be loaded in the PdfViewerHelper object of the Syncfusion.EJ.PdfViewer assembly to load the PDF document in the PDF viewer control. Please find the code snippet for loading the PDF document in the PDF viewer control below.  
 
Code Snippet:  
In the Load action method in the Web API controller,  
 




PdfViewerHelper helper = new PdfViewerHelper();  
  if (jsonResult.ContainsKey("isInitialLoading"))  
                {  
                    CloudBlobContainer _cloudBlobContainer = _blobClient.GetContainerReference(_containerName);    
      CloudBlockBlob _blockBlob = _cloudBlobContainer.GetBlockBlobReference("HTTP Succinctly.pdf");      
      MemoryStream memoryStream = new MemoryStream();     
      _blockBlob.DownloadToStream(memoryStream)  
                    helper.Load(memoryStream);  
                }  
  
 
The code snippet for Load and other web action methods are available in the following UG documentation link.  
  
https://help.syncfusion.com/js/pdfviewer/getting-started   
  
Please let us know if you need any further assistance.  
 
Regards,Karthik R

Manuel · Answer

Ok perfect, it's work!i have another question: If i want pass a parameter from view to webapi controller, where can i put that parameter?Example:@(Html.EJ().PdfViewer("pdfviewer").ServiceUrl(“../api/PdfViewer/parameter?”).PdfService(Syncfusion.JavaScript.PdfViewerEnums.PdfService.Local))  Thanks!

Sabari Anand Senthamarai Kannan · Answer

Hi Manuel, 

Thank you for your update. 

We can pass a parameter from the view page to the Web API controller of the PDF viewer control. To achieve this, we need to modify the routing template of the ASP.NET MVC application in the WebApiConfig.cs file. Please find the code snippet below for your reference. 

In WebApiConfig.cs file, 





        public static void Register(HttpConfiguration config) 
        { 
                config.Routes.MapHttpRoute( 
                name: "DefaultApi", 
                routeTemplate: "api/{controller}/{id}/{action}", 
                defaults: new { id = RouteParameter.Optional } 
            ); 
        } 

Then we need to specify the parameter that needs to be sent to the controller from the view page. Please find the code snippet below for your reference. 

In View page, 





              @(Html.EJ().PdfViewer("pdfviewer").ServiceUrl("../api/PdfViewer/10")) 

In the API controller, we can access the parameter that we have passed from the view page. Please find the code snippet below for accessing the parameter in the API controller. 

In web API controller, 





public object Load(int id, Dictionary<string, string> jsonResult) 
{ 
 
} 
//where id will retrieve the value 10 which we have passed from the view page 

We have created a sample to demonstrate the same. You can download the sample from the following location. 

http://www.syncfusion.com/downloads/support/forum/133568/ze/PdfViewer_MVC-2117724930 

Please let us know that the above sample meets your requirement. If not, please provide us further details about your requirements. It will be helpful for us to analyze further and assist you better. 

Please let us know if you need any further assistance. 

Regards, 
Sabari Anand