JqxFileUpload Problem – Refused to display ' in a frame because it set 'X-Frame

[AleksandarTParticipant]

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.

[DimitarParticipant]

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/

[SJParticipant]

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

[DimitarParticipant]

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/

[SJParticipant]

Hi Dimitar,

Please see my comments:

Thanks,

[DimitarParticipant]

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/

[SJParticipant]

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! ";
		}
	}

[DimitarParticipant]

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/

[SJParticipant]

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

[SJParticipant]

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

[Author]

Posts