Implement fine uploader javascripts in asp.net mvc - asp.net

Finally after so much testing and so on, i made it works. But i`m confused which files do i need and why im getting an error.
i have
/Scripts/fineupload/
handler.base.js
handler.form.js
handler.xhr.js
uploader.basic.js
util.js
My script bundle is
BundleTable.Bundles.Add(new AmazonS3ScriptBundle("~/bundles/gzip/fineuploader")
.Include("~/Scripts/fineuploader/handler.base.js")
.Include("~/Scripts/fineuploader/handler.form.js")
.Include("~/Scripts/fineuploader/handler.xhr.js")
.Include("~/Scripts/fineuploader/uploader.basic.js")
.Include("~/Scripts/fineuploader/util.js")
);
When i try to load my page im getting an error
My Page
<div id="fine-uploader" class="btn btn-primary"><div>Select Files</div></div>
....
#Scripts.Render("~/bundles/gzip/fineuploader")
...
Fine uploader javascript is rendered as single file ex. somemd5.js
I try to init my uploader on document ready as
uploader = new qq.FineUploaderBasic({
multiple: false,
autoUpload: false,
button: $("#fubUploadButton")[0],
request: {
endpoint: "http://localhost:64247/upload/uploadfile"
},
callbacks: {
onError: errorHandler
}
});
Im getting to much errors, but ill start with the last one..
If i just includeuploader.basic.js, im getting error like
Which files do i need? In zip file from github, there are 10 javascript files (some empty).
Its strange why on test page from zip, everything works but when i implement in my proejct it does not work...

This is precisely why a zip file with combined/minified & version-stamped js, along with version-stamped css & resource files is available. Click on the download link either on the homepage or at the top of the readme in the master branch.

Related

Issues with Kendo MVVM file upload control

I was trying to get a Kendo MVVM file upload working along with ASP.NET. This is how my HTML looks for the upload declaration:
<input name="attachments"
id="fileUpload"
type="file"
data-role="upload"
data-async="{ saveUrl: 'FileUpload.aspx', autoUpload: true }"
data-bind="events: { success: onSuccess,error: onError }">
and the FileUpload page load:
Response.Expires = -1;
//Code to upload -- This returns me the file url that i need to send back as a response
Response.ContentType = "text/plain";
Response.Write(fileUrl);
Response.End();
The page load written above does function as expected and return me the desired result but the kendo control here behaves in a funny manner. It tells me that the upload is unsuccessful as in the error icon shows up on the UI. Moreover it is the error handler provided by Kendo that is executed though the written response is returned properly when I try accessing it as:
e.XMLHttpRequest.responseText
Well I guess I might have missed out something/done some small mistake here or there but unfortunately I am not able to figure the same out. Anyone who could possibly suggest/correct?
Well it seems that the response for the file upload control should be empty or a JSON string otherwise it is treated as an error. I changed the Response text to thus:
Response.Write(new JavaScriptSerializer().Serialize(fileUrl));
to resolve.
Hope this helps someone else!

How can I still run a custom IBundleTransform when EnableOptimization is off in ASP.NET?

First the background - I'm using Handlebars for templating HTML and I want to make use of the bundling and caching capabilities of ASP.NET Bundling to deliver the templates to the client. To that end I've created my own Bundle subclass and an implementation of IBundleTransform that does some necessary conversion of my templates. In particular I:
add the templates to visual studio as HTML but embed the template in a <script type='text/x-handlebars-template'>...</script> which seems to give me great template/html intellisense
in my implementation of IBundleTransform I wrap the final template in something along the lines of Injector.register('{0}', function() {{ return window.atob('{1}'); }}); where {0} is replaced with the path of the template and is used to fetch the template in client code and {1} is replaced with a base64 encoded form of the HTML (until I can figure out a better way of encoding the html string!)
My problem comes if I set BundleTable.EnableOptimizations = false at which point none of number 2 above occurs and I'm delivered the raw file. I've temporarily resorted to the following code which stops minification of all files but still transforms them :
BundleTable.EnableOptimizations = true;
if (System.Diagnostics.Debugger.IsAttached)
{
foreach (var bundle in bundles)
{
if (bundle.Path != "~/bundles/handlebars-templates")
bundle.Transforms.Clear();
}
}
Is there a better option that allows me to turn optimizations off, deliver all my templates individually to the browser but still have them transformed before they go?

ui-router reload page in specific route

I've implemented an SPA for my asp.net project, which is working fine, but this project is running with an api, and the help pages for that api are hosted on /help but the ui-router is taking over this route;
by $urlRouterProvider.otherwise('/'); i can have the url working but I have to manually reload to page for getting it.
Is there any possibility to get this working?
So ignoring the route?
Say to reload the page everytime a link is clicked in a specific url?
Suggestions?
Also I don't have access to the code in that url
If you want to reload ui-route, You can use this code
$state.transitionTo($state.current, {}, { reload: true, inherit: false, notify: true });
You can write your own state name which will be reload, Change the $state.current to your own state name.
OR Some example here
$stateProvider.state('url', { url: '/url?url' })
$state.transitionTo('url', { url: 'http://google.com' })
hopefully things are more clear now. https://github.com/angular-ui/ui-router/wiki/URL-Routing
Fixed it finally:
by adding this code to my landingController it reloads the page when clicked on a /Help link:
$('a[href*="Help"]').click(function () {
location.reload();
});

routing asp.net webforms physical file are not been ignore

I am trying to use asp routing in webforms.
want to route home page to defaut.aspx
all other aspx pages to cms.aspx
I made this line of code in global
routes.MapPageRoute(//this for home page
"Home",
string.Empty,
"~/Default.aspx"
);
routes.MapPageRoute("defaultRoute", "{*value}", "~/cms.aspx");//all other pages
this works in localhost
http://localhost:36443 //redirect to default.aspx
http://localhost:36443/page1//redirect to cms.aspx
The problem start here:
http://localhost:36443/page1/somevalue
This time the routing doesn't recognize the physical file(css js... etc) and start routing them to cms.aspx.
in the production website:
http://mySubDomain.website.com
the problem is even more weird ,wcf are routing to cms.aspx.
for example this link:
http://subdomain.website.com/WebServices/webservice.svc/webserviceFunction
redirect to cms.aspx instead of ignore the physical file svn.
I tried all kind of ignore with no effect at all
routes.Ignore("{resource}.svc/{*pathInfo}");
routes.Ignore(("{file}.svn"));
routes.Ignore("{*allcss}", new { allcss = #".*\.css(/.*)?" });
routes.Ignore("{*alljpg}", new { alljpg = #".*\.jpg(/.*)?" });
routes.Ignore("{*svc}", new { alljs = #".*\.svc(/.*)?" });
I think microsoft toke a routing from mvc to webform without single tought about it.
Does anyone know how to go around this problem.
Thanks
Baaroz
you can use
<script type="text/javascript" src='<%= ResolveUrl("~/path to script ")%>'></script>
or
routes.Ignore("{resource}.js/{*pathInfo}");
but you need to write ("the name of folder that you palce js file /{resource}.js/{*pathInfo}");
to can use it

Knockout JS image binding

I am using knockout js in my single page application. I have a file upload input tag that I'm using knockout to upload the file with. In this case the files being uploaded are images.
Once the image has been processed by my ASP.NET Web API, and it comes back into my callback function I am inserting the response into an observable array which inhand updates the screen with the new image and text that was added.
However, for some reason the images aren't being displayed. If I refresh the page it loads the images fine but when adding to the observable array it's not showing the images.
Any ideas?
Edit: Here is my code that adds the item, it's pretty straight forward.
item = {
"insightTypeId": 0,
"memberId": currentMemberId(),
"postedByMemberId": store.fetch("currentUser"),
"value": insight(),
"image": "content/insights/" + fileName
};
messaging.client.addItem = function(item) {
member().insights.unshift(item);
};
Update
Forgot to mention that it works fine on a computer viewing the site, but on a phone it doesn't work.
I figured out that it was a mobile safari resource issue

Resources