jQuery UI Widgets Forums Editors FileUpload JqxFileUpload Problem – Refused to display ' in a frame because it set 'X-Frame

This topic contains 9 replies, has 3 voices, and was last updated by  SJ 6 years, 3 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • AleksandarT
    Participant

    Hello,
    I am using file upload to do an upload to Spring 4 backend and i get the following error
    When i select a file and click Upload, the first time it doesn’t do anything (except getting the error specific below).
    The second time the request gets to the backend (Controller), but when result is returned i get the error below

    Refused to display 'http://localhost:8180/adminUpload?_csrf=xxxxx' in a frame because it set 'X-Frame-Options' to 'deny'.
    VM186:66 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://localhost:8180" from accessing a cross-origin frame.

    Dimitar
    Participant

    Hello AleksandarT,

    jqxFileUpload uses an iframe internally in order to achieve seamless file upload without page reload. Here is a help topic that might help you resolve the issue: https://stackoverflow.com/questions/28647136/how-to-disable-x-frame-options-response-header-in-spring-security.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    SJ
    Participant

    Hi Dimitar,

    I have handled the csrf issue but i am getting this exception and because of this issue all the upload events call twice.
    Please let me know where i need to set the fileName value.

    Uncaught TypeError: Cannot read property 'fileName' of undefined
        at HTMLIFrameElement.<anonymous> (jqxfileupload.js:formatted:703)
        at HTMLIFrameElement.dispatch (jquery-1.11.1.js:4641)
        at HTMLIFrameElement.elemData.handle (jquery-1.11.1.js:4309)
    var token = $("input[name='_csrf']").val();
    var header = "_csrf";
    var uu = 'uploadFile?' + header + "=" + token + "&selectedProjectId=" + document.getElementById("selectedProjectId").value + "&libName=" + selectedLibrary;
    
    

    $(‘#jqxFileUpload’).jqxFileUpload({
    width : 300,
    theme : ‘bootstrap’,
    browseTemplate : ‘default’,
    uploadTemplate : ‘default’,
    cancelTemplate : ‘default’,
    accept : ‘.txt,.xlsx,.xls,.xpt,.sas7bdat,.sas7bcat,.csv,.zip’,
    fileInputName : ‘fileInput’,
    uploadUrl : uu
    });

    Thanks,
    Shweta


    Dimitar
    Participant

    Hi Shweta,

    This error seems to be thrown, because jqxFileUpload tries to upload an already uploaded file. Could you, please, share more details about this issue:

    • What version of jQWidgets are you using?
    • What browser does the issue occur in?
    • Is (was) there a configuration (on your side) that did not cause the issue and are there other jqxFileUploads in your project that upload files as expected?
    • Are you sure you have made a correct use of the fileInputName property? Here is its description from the API documentation: Sets or gets the name attribute of the hidden file input which is submitted to the URL specified by the uploadUrl property. This name is applied to the file input of the file about to be uploaded and after the upload the name attribute is removed so that it can be set to the next hidden file input (if any). As a result, there is only one file input with this name attribute at a time.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    SJ
    Participant

    Hi Dimitar,

    Please see my comments:

    Thanks,

  • What version of jQWidgets are you using? [Shweta:- jQWidgets v4.1.2 (2016-Apr). This is licensed version.]
    What browser does the issue occur in?[Shweta in all the browsers.]
    Is (was) there a configuration (on your side) that did not cause the issue and are there other jqxFileUploads in your project that upload files as expected?
    Are you sure you have made a correct use of the fileInputName property? Here is its description from the API documentation: Sets or gets the name attribute of the hidden file input which is submitted to the URL specified by the uploadUrl property. This name is applied to the file input of the file about to be uploaded and after the upload the name attribute is removed so that it can be set to the next hidden file input (if any). As a result, there is only one file input with this name attribute at a time.
    [Shweta: this error is coming when i opened the jqxwindow where it has jqxfileupload feature. please see the code]
  • 
    
    $("#uploadDatViewWindow").jqxWindow({
    		height : 400,
    		width : 400,
    		theme : 'bootstrap',
    		resizable : false,
    		isModal : true,
    		autoOpen : false,
    		initContent : function() {
    			var token = $("input[name='_csrf']").val();
    			var header = "_csrf";
    			var uu = 'uploadFile?' + header + "=" + token + "&selectedProjectId=" + document.getElementById("selectedProjectId").value + "&libName=" + selectedLibrary;
    
    			$('#jqxFileUpload').jqxFileUpload({
    				width : 300,
    				theme : 'bootstrap',
    				browseTemplate : 'default',
    				uploadTemplate : 'default',
    				cancelTemplate : 'default',
    				accept : '.txt,.xlsx,.xls,.xpt,.sas7bdat,.sas7bcat,.csv,.zip',
    				fileInputName : 'fileInput',
    				uploadUrl : uu
    
    			});
    
    			$('#eventsPanel').jqxPanel({
    				width : 300,
    				height : 150,
    				theme : 'bootstrap',
    			});
    		}
    
    	});
    
    ----
    Click a button to open window:
    if (!uploadViewDatButton.jqxButton('disabled')) 
    {
      $("#uploadDatViewWindow").jqxWindow('open');
      $('#eventsPanel').jqxPanel('clearcontent');
    }
    -------
    Server side code:
    
    	@RequestMapping(value = "uploadFile", method = RequestMethod.POST)
    	public @ResponseBody String uploadFile(HttpServletRequest request, @RequestParam("fileInput") MultipartFile fileInput, @RequestParam String selectedProjectId, @RequestParam String libName) {
    
    		if (!fileInput.isEmpty()) {
    			try {
    				byte[] bytes = fileInput.getBytes();
    
    				// Creating the directory to store file
    
    				File dir = new File("\\\\sas-vm\\" + selectedProjectId + "\\Data\\" + libName + File.separator + "other");
    				if (!dir.exists())
    					dir.mkdirs();
    
    				// Create the file on server
    				File serverFile = new File(dir.getAbsolutePath() + File.separator + fileInput.getOriginalFilename());
    				BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
    				stream.write(bytes);
    				stream.close();
    
    				logger.info("Server File Location=" + serverFile.getAbsolutePath());
    
    				return fileInput.getOriginalFilename() + " :Successfully uploaded ";
    			} catch (Exception e) {
    				return fileInput.getOriginalFilename() + ": Failed to upload! " + e.getMessage();
    			}
    		} else {
    			return fileInput.getName() + ": Empty file, Failed to upload! ";
    		}
    	}
    
    

Dimitar
Participant

Hi Shweta,

Could you, please, share whether the issue occurs if the jqxFileUpload is outside the window? We also recommend updating to the latest version of jQWidgets (6.0.5), which has many improvements over 4.1.2 (released over two years ago).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/


SJ
Participant

Hi Dimitar,

Sorry for the late response. I have upgraded with the latest version 6.0.5 and used the jqxfileupload feature outside the jqxwindow, the problem is still coming ie. all the upload events call twice. :-(.

Please HELP!

var token = $("input[name='_csrf']").val();
			var header = "_csrf";
			var uu = 'uploadFile?' + header + "=" + token + "&selectedProjectId=" + document.getElementById("selectedProjectId").value + "&libName=" + selectedLibrary;

			$('#jqxFileUpload').jqxFileUpload({
				width : 300,
				theme : 'bootstrap',
				browseTemplate : 'default',
				uploadTemplate : 'default',
				cancelTemplate : 'default',
				accept : '.txt,.xlsx,.xls,.xpt,.sas7bdat,.sas7bcat,.csv,.zip',
				fileInputName : 'fileInput',
				uploadUrl : uu

			});

			$('#eventsPanel').jqxPanel({
				width : 300,
				height : 150,
				theme : 'bootstrap',
			});
		}

	});

----
Click a button to open window:
if (!uploadViewDatButton.jqxButton('disabled')) 
{
  $("#uploadDatViewWindow").jqxWindow('open');
  $('#eventsPanel').jqxPanel('clearcontent');
}
-------
Server side code:

	@RequestMapping(value = "uploadFile", method = RequestMethod.POST)
	public @ResponseBody String uploadFile(HttpServletRequest request, @RequestParam("fileInput") MultipartFile fileInput, @RequestParam String selectedProjectId, @RequestParam String libName) {

		if (!fileInput.isEmpty()) {
			try {
				byte[] bytes = fileInput.getBytes();

				// Creating the directory to store file

				File dir = new File("\\\\sas-vm\\" + selectedProjectId + "\\Data\\" + libName + File.separator + "other");
				if (!dir.exists())
					dir.mkdirs();

				// Create the file on server
				File serverFile = new File(dir.getAbsolutePath() + File.separator + fileInput.getOriginalFilename());
				BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
				stream.write(bytes);
				stream.close();

				logger.info("Server File Location=" + serverFile.getAbsolutePath());

				return fileInput.getOriginalFilename() + " :Successfully uploaded ";
			} catch (Exception e) {
				return fileInput.getOriginalFilename() + ": Failed to upload! " + e.getMessage();
			}
		} else {
			return fileInput.getName() + ": Empty file, Failed to upload! ";
		}
	}

Dimitar
Participant

Hi Shweta,

Please also share the HTML code of your jqxFileUpload. Please note that it must not be placed inside a form element, because it is meant to be stand-alone.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/


SJ
Participant

Hi Dimitar,

in jsp page, i have below:
<div id=”jqxFileUpload” class=”windowDiv”></div>

<div style=”float: left; margin-left: 50px;”>
<div>Events log:</div>
<div id=”eventsPanel”></div>
</div>

Thanks,
Shweta


SJ
Participant

Hi dimitar,

I am able to figured it out. It was problem in my code caused by jQuery bubble events. I have resolved it.

Thank you for your time and patience.

Shweta

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.