In my Rails App (3.2.12) I'm using the jquery-fileupload-rails gem to enable users ti upload profile pictures. Everything works fine in Chrome and Safari, but in Internet Explorer (I tested it with version 10) I can't even select files to upload. When I click the 'Add Files'-Button, instead of showing a dialog to select files he instantly fires an empty request to the upload action, resulting in a json response showing an empty photo object. This is my current js to initialize the fileupload (I already added some code from issues with IE and the csrf-tokens):
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
dataType: 'json',
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|tiff)$/i
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(/\/[^\/]*$/, '/photos?%s')
);
//add csrf token manually for ie iframe transport
$('#fileupload').bind('fileuploadsend', function(event, data) {
auth_token = $('meta[name="csrf-token"]').attr('content');
data.url = data.url + '?authenticity_token=' + encodeURIComponent(auth_token);
$.blueimp.fileupload.prototype.options.send.call(this, event, data);
});
and my controller code for the response, in which I already (hopefully correct) set the content type to 'text/plain':
format.html {
render json: [#photo.to_jq_upload].to_json,
content_type: 'text/plain', #content_type: 'text/html',
layout: false
}
format.json {
render json: {files: [#photo.to_jq_upload]},
content_type: 'text/plain',
status: :created,
location: #photo
}
Does anyone know, how to get this to work in IE and can help me please? Thanks :)
It took me quite some time to figure it out but in the end it was actually pretty simple: When applying my own styles I replaced the span-tag around the Add-Files-Button with a button-tag. This had no effect in the webkit browsers, however led to an immediate form submit in Firefox and Internet Explorer. Changing it back finally solved the issue :)
Related
I have this feature test in rspec
fill_in "Name", "title"
#fill_in "Body", "my blog" # this is the old implementation before tinymce
within_frame("mce_0_ifr") do
page.driver.browser.find_element(:id, 'tinymce').send_keys("blog 123")
puts page.html
end
click_button "Submit"
From the output I can clearly see that the word "blog 123" was written in the body via
<body id="tinymce"><p>blog 123</p></body>
But I get a test fail because it does not create a new blog post.
Turns out the code is fine. I was getting an error due to tinymce and html5 required validation not working together. Therefore the data is never sent, and capybara moves on to the next expect thus rendering an error. Just incase someone get's into this problem I'll post how I solved it.
<script>
tinymce.init({
selector: "textarea.tinymce",
editor.on('change', function () {
editor.save();
})
})
</script>
I'm trying to upload a jpeg image from local files to a webpage developed here in my job. The thing is, we need to click on the page to open the file explorer and then select the image (or drag and drop into the same spot that may be clicked).
Here is a picture from the web page
I don't know how could i do that, i was trying some code that i've seen in "https://medium.com/#chrisbautistaaa/adding-image-fixtures-in-cypress-a88787daac9c". But don't worked. I actually don't know how it works exactly, could anyone help me?
Here is my code
After #brendan's help, I was able to solve the problem by finding an input that was "hidden" under an element. However, before that I tried drag-n-drop, and cypress returned me an error (despite the successful upload). The context was, immediately after the upload, the element re-renders and cypress told me that:
.
Beside the success with input element, i was wondering how it would be possible to resolve this error, is it possible to do something internally to cypress to ignore or wait until the element re-renders back to normal?
Solutions suggested by cypress:
We're doing this using cypress-file-upload
Here's an example from our code:
cy.fixture(fileName).then(fileContent => {
cy.get(selectors.dropZoneInput).upload(
{ fileContent, fileName, mimeType: "application/pdf" },
{ subjectType: "drag-n-drop" }
);
});
For your purpose, I think this will work:
cy.fixture(imagePath).then(fileContent => {
cy.get(".upload-box").first().upload(
{ fileContent, fileName, mimeType: "image/jpeg" },
{ subjectType: "drag-n-drop" }
);
});
I have a pdf URL and I want to open it using DocumentViewer. When I run code:
this._document.viewDocument(pdfUrl, 'application/pdf', options);
It is not opening PDF. I tried downloading PDF to my mobile and then open it. Please find code below:
transfer.download(downloadUrl, filename).then(entry => {
const url = entry.toURL();
if (this._plt.is('ios')) {
this._document.viewDocument(pdfUrl, 'application/pdf', options);
} else {
this._fileOpener.open(pdfUrl, 'application/pdf')
.then(() => console.log('File is opened'))
.catch(e => this.presentAlert('Error opening file', e));
}
});
I have tables and images in my PDF. When I ran above code I am not able to see HTML5 tables in the PDF.
I need help on how to open up PDF URL directly using DocumentViewer.
NOTE: I have seen a couple of post on StackOverflow suggesting to use InAppBrowser. I have a requirement where I need to display it as PDF.
I have read in https://github.com/sitewaerts/cordova-plugin-document-viewer,
that in android : Due to license restrictions in muPDF, the plugin dispatches to a separate (free) viewer app based on muPDF. If the viewer app is not yet installed, the user may be redirected to the google play app store.
https://play.google.com/store/apps/details?id=de.sitewaerts.cleverdox.viewer.
you may use other pdf plugins like
https://github.com/vadimdez/ng2-pdf-viewer/
hope this helps
I have an ExtJS4 site www.mysite.com where I serve index.html when a user enter the site. I want the user to be able to access the site with some param data redirected from another site. For example, www.mysite.com?q=10
How do I capture q=10 which I will use to retrieve some data from the database?
How do I send index.html so that browser retrieves javascript and css files. Once all the javascript and css files are loaded, I need to render a page displaying the result from the database?
Thanks
To get the url parameters I've done this :
var getParams = document.URL.split("?");
var params = Ext.urlDecode(getParams[getParams.length - 1]);
console.log(params.q) // you should see 10 being printed
If index.html is gonna come with some param in the url you can use the launch method to do an ajax request and bassed on that response render something
Ext.application({
name : 'MyAppWithDynamicFirstPage',
launch : function() {
var getParams = document.URL.split("?");
var params = Ext.urlDecode(getParams[getParams.length - 1]);
var q = params.q;
Ext.Ajax.request({
url: 'someServlet/getViewToRender',
params: {
'q': q
},
success: function(response, opts) {
//bassed on this you would do something else like render some specific panel on your viewport
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}
});
I hope this was of some help.
Best regards.
Depends of your web server, programming language and architecture
Usually first ExtJs is loading with all js/css. After it loaded, data loads asynchronously from the server. But if you exactly know what are you doing, you can render your data into a global variable inside a script tag and then use it in the code.
- form_for(#post, :remote => true, :id => 'post_form') do |f|
Works as expected in FF and Chrome, but IE just processes the submit action normally, without any ajax request.
Not really seeing any info on this on the rest of the internet so I imagine I've done something wrong somehow. Ive used both the default rails.js, and the jquery version from the github page
Well, I don't know why the default rails version doesn't work for me here on IE, but I wrote this as a workaround:
if ($.browser.msie) {
var form = $('form#new_post');
form.find('input#post_submit').bind('click', function(){
var data = form.serializeArray();
$.ajax({url: '/posts', type: 'POST', data: data});
return false
});
}
And now it's working correctly. Shouldn't something like this be included in rails.js if this is in fact a problem with Rails, and not something that I've somehow done?
In our Rails 3 app the form tagged as data-remote wasn't turned into an AJAX form any longer after we had upgraded to jquery-rails 1.0.19. IE7 wasn't able to load the jquery.js - there seems to be a problem with version 1.7.1 of jQuery currently. After downgrading to jquery-rails 1.0.18 the problem disappeared again.