Get file path without the file - asp.net

On a web page, I need to allow users to input the path to a file - which will be stored in a database so I can subsequently display 'a list of documents that apply to this project'.
If I put an input type="file" on the page, it makes it easy for the user to browse to the document ... but, when the form is submitted, the document will be uploaded to the server. I don't want the document, I just want the path.
How would you provide the functionality to allow a user to browse to a file so that you could record the path to the file without actually uploading the file itself?
I just want to end up showing, on a web page, a list of files like:
\myserver\folder20\somefolder\somefile.doc
\myserver2\folder50\somefolder\somefile.doc
I need to give users an easy way to locate those files in the first place - without having to laboriously open Windows Explorer, find the file, and copy and paste the path.
A file upload control gives you access to the path - which is what I need - but I don't want the file uploaded.

I am not very sure if this is what you want.
Assuming that you are selecting the file using input type="file" html control, you will be able to get the complete file path in jquery and pass that to your asp.net code behind using PageMethods (or ajax method of jquery). For this you would need to create a webmethod inside your aspx.cs class.
You can also get the machine name in javascript using any of the following lines of code
Request.ServerVariables["REMOTE_ADDR"]
Request.ServerVariables["REMOTE_HOST"]
Request.ServerVariables["REMOTE_USER"]
I was not able to test these as you have to enable Reverse DNS Lookup for your IIS. You need to search on the net for this.
So, the following steps you would need to do
Your file upload control should look something like this
<input type="file" id="fileSel" />
put a scriptmanager tag, if you dont have one, in your html and set EnablePageMethods to true as
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
Your javascript should look something like this.
//in javascript
$("document").ready(function () {
$("#fileSel").change(function () {
var val = $get("fileSel").value; // This will give you complete file path i.e. C:\...
alert(val);
PageMethods.SendForm(val, OnSucceeded, OnFailed);//Call to webmethod on server side
//you can also use ajax method but I was not able to make this work
// $.ajax({
// type: "POST",
// //Page Name (in which the method should be called) and method name
// url: "Default.aspx/SendForm",
// // If you want to pass parameter or data to server side function you can try line
// data: "{'fileName':'" + val + "'}",
// //else If you don't want to pass any value to server side function leave the data to blank line below
// // data: "{}",
// contentType: "application/json; charset=utf-8",
// dataType: "json",
// success: function (msg) {
// //Got the response from server and render to the client
// alert(msg.d);
// }
// });
});
});
function OnSucceeded() {
alert("success");
}
function OnFailed(error) {
// Alert user of the error.
alert("failure");
}
The webmethod will be present inside the default.aspx.cs class as
public partial class _Default : System.Web.UI.Page
{
[System.Web.Services.WebMethod]
public static void SendForm(string fileName)
{
//Do your stuff here
}
}
Hope you will be able to solve your problem using the above steps.
Regards,
Samar

Related

In ASP.NET MVC, how can I open a static .html page in a new tab from an action method in a controller?

I am adding static help pages to my MVC application.
Clicking the help link directs to an Action Method with a unique identifier, telling the controller which page to show.
I know it can be done from within the View using Javascript or an anchor tag.
You can also open the static page from the controller, but it does not open in a new tab:
var result = new FilePathResult("~/Help/index.html", "text/html");
return result;
I cannot seem to open this static page in a new tab from the controller. Is this even possible?
EDIT
As to why How do you request static .html files under the ~/Views folder in ASP.NET MVC? does not solve my problem:
My static file do not live in the Views folder and it also does not address opening the page in a new tab.
EDIT 2 - Solution
Since this cannot be done directly from the controller I implemented the following in my View's scripts.
$('#linkAppHelpButton').off().on('click', function () {
$.ajax({
type: "GET",
url: '#Url.Action("ReturnHelpPage", "Help", null)',
data: { identifier: "index" },
success: function (page) {
window.open(page, '_blank');
},
})
});
Since controllers are processed on the server side, it is not possible to control aspects of the browser such as "open in a new tab".
You can (as you have discovered) serve an HTML file through a controller action or just allow the web server to serve it directly. But the only options for opening the content in a new tab are to use <a target="_blank" href="some URL">new tab</a> or use JavaScript.

How can i upload a file to server (asp.net web form) with ajax?

My project is an online mock toefl test. In speaking section I want to upload a recorded file (audio) to server. for recording im not using flash and its only js.
I searched and find something useful but the server is php. and i cant turn the codes to asp.net (web form). please help me out.
In php i used this code in js :
function uploadAudio(mp3Data){
var reader = new FileReader();
reader.onload = function(event){
var fd = new FormData();
var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
console.log("mp3name = " + mp3Name);
fd.append('fname', mp3Name);
fd.append('data', event.target.result);
$.ajax({
type: 'POST',
url: 'upload.php',
data: fd,
processData: false,
contentType: false
}).done(function(data) {
//console.log(data);
log.innerHTML += "\n" + data;
});
};
reader.readAsDataURL(mp3Data);
}
and this code in upload.php:
<?php
if(!is_dir("recordings")){
$res = mkdir("recordings",0777);
}
// pull the raw binary data from the POST array
$data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data,
//echo ($decodedData);
$filename = urldecode($_POST['fname']);
// write the data out to the file
$fp = fopen('recordings/'.$filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
?>
How can i do this in asp.net, tanks.
You can use jQuery File Uploader on an aspx page. Your client can simply communicate withe an ashx handler at the server side.
https://evolpin.wordpress.com/2011/09/11/asp-net-ajax-file-upload-using-jquery-file-upload-plugin/
One method, and perhaps the most simple solution, is to just use the <asp:FileUpload> control, and hide it from view. Then again, although this works well if you want the user to choose the files they're uploading, it might not be the best solution if you want to implement some kind of HTML5 drag'n'drop solution, etc.
Coincidentally, I spent pretty much all of last week studying how to upload files via javascript to ASP.NET web forms. I developed a drag and drop interface that uses HTML5, and also developed a fail-over method with which the user could choose and upload their files via the <asp:FileUpload> control.
Due to the feature being low-priority, we only fully developed the <asp:FileUpload> control, but I'm happy to share that feature with you here:
HTML
We're going to create an ASP file upload control, and hide certain parts of it. The rest of it, we can add styles to (or do whatever in javascript and CSS) to make it look fancy and customized. The CONTINUE BUTTON
<!-- Allow user to upload the file via the fallbackuploader -->
<div id="fallbackUploader" class="uploader-item-fallbackuploader uploader-item fallbackuploader step-container">
<div class="fallbackuploader-item-uploadcontrols fallbackuploader-item uploadcontrols">
<!-- Uploader Label (note: this serves as the visible "choose files" button too) -->
<label id="uploader_choose_files_button" class="uploadcontrols-item uploadcontrols-item-label button animated" for="mainContent_subContent_fbu_fileuploader">
Choose Files
</label>
<!-- Choose Files button (**NOTE: you'll want to make this control invisible. Try not to set the display to none, as that may cause ASP to omit rendering it -->
<asp:FileUpload ID="fbu_fileuploader" CssClass="uploadcontrols-item-aspfileloader uploadcontrols-item aspfileloader" runat="server" />
<!-- Continue button (NOTE: this button triggers the event that on the server side that will actually handle the file upload -->
<asp:Button ID="fbu_fileuploaderButton" runat="server" Text="Continue" ClientIDMode="Static"
CssClass="uploadcontrols-item-button-upload uploadcontrols-item-button uploadcontrols-item button-upload button continue-button hidden disabled animated" />
<!-- Cancel button -->
<div id="chooseFilesCancelButton" class="uploadcontrols-item-uploadcontrols-item-button
uploadcontrols-item cancel-button hidden disabled button animated">
Go Back
</div>
</div>
</div>
Javascript
// Organizational container for the file uploader controls.
var aspUploadControlsContainer = $('.fallbackuploader-item-uploadcontrols');
// ASP control that chooses and loads the file.
var aspFileLoader_ele = aspUploadControlsContainer.children('.uploadcontrols-item-aspfileloader'),
// element that represents the "choose files" button.
aspUploaderChooseFilesLabel = aspUploadControlsContainer.find('.uploadcontrols-item-label'),
// ASP button that loads the file
aspFileLoaderButton_ele = aspUploadControlsContainer.children('.uploadcontrols-item-button'),
// the element created by the actual ASP "<asp:FileUpload>" control tag.
aspFileUploadControl_ele = aspUploadControlsContainer.find('input.uploadcontrols-item-aspfileloader'),
// the message/alert container
messagebox_ele = $('.uploader-item-messagebox');
// ------------------------------------------------------------
// Bind the 'click' and 'change' events to the file uploader
// ------------------------------------------------------------
function bindAspUploadControlEvents() {
aspFileLoader_ele.on('change', function () { // add the on-change event for the file uploader.
console.log('File changed ...');
if (!aspUploaderChooseFilesLabel.hasClass('upload-disabled')) {
console.log('Choose-files label not disabled ...');
fileSelected(); // perform the file-selected actions.
}
});
};
// ------------------------------------------------------------
// Validate the selected file name and adjust the uploader.
// ------------------------------------------------------------
function fileSelected() {
console.log('File selected...');
var f = aspFileLoader_ele.val() || '';
f = f.replace('C:\\fakepath\\', '') || ''; // get the file name <-- ASP.NET masks the path as C:\\fakepath\\ for security purposes...we'll just take that part out.
var xlRegex = /.(xlsx|xls)$/i; // set the regex to test for accepted file extensions.
if (f.length && !(f.match(xlRegex))) {
// --------------------------- FAILED - show a message -----------------------------------------------------------------
console.log('File-name invalid. Displaying error message ...');
convertCFlabelToButton(); // <-- converting the label to a button and visa versa is probably a round-about way of doing what we wanted, but we were doing some other stuff with it that kind of made it a necessary evil :)
deactivateChooseFilesCancelButton(); // if nothing selected, disable and hide cancel button <-- these functions just do some fluffy stuff that you probably won't need.
deactivateUploaderContinueButton(function () { // if nothing selected, disable and hide continue button <-- these functions just do some fluffy stuff that you probably won't need.
messagebox_ele.text("You've selected a file with an invalid file name. Please make sure the file extension ends with \".xlsx\".").show(); // show the error message.
});
} else if (f.length && f.match(xlRegex)) {
// --------------------------- PASSED -----------------------------------------------------------------
console.log('File-name validated. Hiding messages...');
messagebox_ele.text('').hide(); // reset and hide any messages
console.log('Messages hidden.');
convertCFbuttonToLabel(f, function () { // this converts the button to a label with the given file name as its text
activateUploaderContinueButton(function () { // show and enable the choose-files continue-button
activateChooseFilesCancelButton() // show and enable the choose-files cancel-button
});
});
} else {
// --------------------------- FAILED - hide message -----------------------------------------------------------------
console.log('No file detected. Returning to default state ...');
messagebox_ele.text('').hide(); // hide any messages
// reset the label to defaults
convertCFlabelToButton();
// ------------------------------------------------------------------------------------------------------------------------------
};
}
CODE-BEHIND
Now we just need to add the VB.NET (or C#) to handle the click-event for the continue button.
Protected Sub fbu_fileuploaderButton_Click(sender As Object, e As EventArgs) Handles fbu_fileuploaderButton.Click
If fbu_fileuploader.HasFile Then
Dim FileName As String = Path.GetFileName(Path.GetRandomFileName())
Dim Extension As String = Path.GetExtension(fbu_fileuploader.PostedFile.FileName)
Dim FolderPath As String = ResolveUrl("~/" & ConfigurationManager.AppSettings("FolderPath"))
Dim FilePath As String = Server.MapPath(FolderPath + FileName)
fbu_fileuploader.SaveAs(FilePath)
GetExcelSheets(FilePath, fbu_fileuploader.PostedFile.FileName, FileName, Extension, "Yes")
End If
End Sub
Other Caveats
We did a couple things in the above code that I did not explain, such as the "FolderPath" application setting (we used this in CODE-BEHIND section to determine where the file should be saved). If you've never used application settings in the web.config, it's very simple. For the sake of the above example, we would add the following snippet between our <configuration> tags:
<appSettings>
<add key="FolderPath" value="uploads/"/>
</appSettings>
I can then access the value of this appSetting using
ResolveUrl("~/" & ConfigurationManager.AppSettings("FolderPath"))
or
ResolveUrl(String.Format("~/{0}", ConfigurationManager.AppSettings("FolderPath")))
Also, I stopped with the function to "getExcelSheets" because that's more specific to my application, and probably beyond the scope of this tutorial.
Additional Resources
I have a good habit of methodically saving useful bookmarks. Here is what I have from my "File Uploader" section...
CodeProject.com - File Upload with ASP.NET
Reading files in Javascript using File APIs
Stack Overflow - jQuery Ajax File Upload to ASP.NET web service with
JSON response
Drag and Drop Asynchronous File Upload <-- DEFINITELY THE MOST
USEFUL
I solved my problem. thank you guys. I used web services. in svc file i wrote these codes:
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[OperationContract]
public void upload(string data)
{
byte[] base64EncodedBytes = System.Convert.FromBase64String(data);
string strFileDestination = System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath + "somefile.mp3";
File.WriteAllBytes(strFileDestination, base64EncodedBytes);
}
}
in js file i wrote this:
function uploadAudio(mp3Data) {
var reader = new FileReader();
reader.onload = function (event) {
Service.upload(event.target.result, helloWorldCallback, onFail);
function helloWorldCallback(result) {
alert(result);
}
function onFail(e) {
alert(e.get_message);
}
};
reader.readAsDataURL(mp3Data);
}

how to save data into database without redirecting to other page in spring MVC

I am using Spring MVC. In my jsp page i have table which inline editable and with every table i have attached one button during edit (when you want to edit then just click on edit button in the dropdown, immediately that row will become editable and edit button will be visible beside that row) so when i will click it, immediately it should save the data of that row to database.
I can do that by providing a link (using tag) with button so when i will click this link, it will match with #RequestMapping in the Controller and from there i will save the data of whole table into database. Now again i have to come back to my previous page so again it will load whole page from database which is very costly.
Can some help me so that only that row id should go to controller and from there it should save into database and i don't have to reload the page again.
You should send your request via Ajax. The page will never reload, and you can choose to reload only a page segment. The easiest way is to use jQuery, bind a method to your links, something like
$("a.saveToDB").click(function(){
var link = $(this);
$.ajax({
url: link.attr("href"),
dataType: "text",
success: function(text) {
// show success message to the user
},
error: function(xhr) {
// show error message to the user
}});
// prevent links default action
return false;
});
The controller method can return a String, e.g.
#RequestMapping(value="/save", method=RequestMethod.GET)
public #ResponseBody String saveToDB() {
// save to DB
return "success";
}

Validating that a form input is not empty

I have this code for Form Submit..
<input type="submit" runat="server" id="buttonSubmit" value="Add" style="width:100px;" />
My BeginForm is like this..
<% using (Html.BeginForm("Insert", "StudentController", FormMethod.Post, new { #id = "exc-" }))
{%>
I have one textbox in my view I need to check my textbox is empty or not if it is Empty display alert box saying please Enter some value in textbox
other wise go to controler..
Please any body help me out?
thanks
You can do this many ways, but possibly the cleanest is to use Data Annotations on your ViewModel. For example -
public class MyViewModel
{
[Required]
public string MyProperty { get; set; }
}
Now in your View use
<% Html.EnableClientValidation(); %>
just before you start the form. This will cause a JavaScript object to be emitted in the markup sent to the client. The script looks like this example
<script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The First Name field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":false,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The Last Name field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"EmailAddress","ReplaceValidationMessageContents":false,"ValidationMessageId":"EmailAddress_validationMessage","ValidationRules":[{"ErrorMessage":"The Email Address field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"ZipCode","ReplaceValidationMessageContents":false,"ValidationMessageId":"ZipCode_validationMessage","ValidationRules":[{"ErrorMessage":"Zip Code must be 5 character long.","ValidationParameters":{"minimumLength":0,"maximumLength":5},"ValidationType":"stringLength"},{"ErrorMessage":"Zip Code must be five digits.","ValidationParameters":{"pattern":"\\d{5}"},"ValidationType":"regularExpression"},{"ErrorMessage":"The Zip Code field is required.","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"valSumId"});
//]]>
</script>
This object contains validation metadata that can be used by a client side validation plugin to hook up validation on the client side. The plugin that comes with ASP.NET MVC 2 is the Microsoft AJAX validator and you will need to include these scripts in the page to use the validation (MicrosoftAjax.js, MicrosoftMVCAjax.js and MicrosoftMvcValidation.js in that order).
Alternatively, if you're more comfortable with jQuery, you can get a script in the MvcFutures source that hooks the validation into the jQuery validate plugin (this isn't a fully fledged script and is missing a few pieces, such as getting client side validation summaries). The script is MicrosoftMvcJQueryValidation.js and you can get it here
The advantage of using Data Annotations is that you get the server side validation too and your client and server side validation will validate for the expected values. Also, the Data Annotations allow you to set Error Messages and names for the field labels from the attributes (error messages and display names* can also come from resource files)
*Because MVC2 was compiled against .NET 3.5 version of Data Annotations, display name cannot be set from resource files. There is a workaround to this - DisplayName attribute from Resources?.
NOW THE EASY WAY
Just set up a submit event handler on the form
var form = document.getElementById('exc-');
var oldSubmit = form.onsubmit || function() {};
form.onsubmit = function() {
var input = document.getElementById('myinput');
if (input.value === '') {
alert('please Enter some value in textbox');
return false;
}
oldSubmit();
}
or with jQuery
$('#exc-').submit(function() {
if ($('#myinput').val() === '') {
alert('please Enter some value in textbox');
return false;
}
});

jQuery + webforms: call an ashx, and refresh an image as a result

Consider an ASP.NET page using the jQuery library Uploadify.
Here is the sequence of events on the ASP.NET webforms page:
User clicks on a file upload control. Plain old HTML <input type="file" />
User picks an image file from their system using a Browse dialog. All working fine.
A jQuery event fires. It calls an ashx that properly uploads as expected.
Now that the file is uploaded, how can I change an <asp:image> on the calling .aspx page? Would really like to do this without a postback!
Here's the code!
<asp:Image ID="imgChangeMe" runat="server" /><br />
<input type="file" name="uploadify" id="uploadify" />
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'scripts/uploadify/uploadify.swf',
'script' : 'uploadify.ashx',
'folder' : 'uploads',
'queueID' : 'fileQueue',
'auto' : true,
'multi' : true
});
});
</script>
Question:
How would you implement the changing of the <asp:image> to reflect the image that the user just uploaded?
This question really shouldn't be related to the uploading library, but rather, how to react to the return/end of execution of an .ashx? Should this be done in another jQuery method
You can definitely do this without making a postback. All you need is to get the path of the uploaded image. From Uploadify documentation I think you can get path from fileObj property or return it from server in response property:
fileObj: An object containing details about the file that was selected.
name – The name of the file
filePath – The path on the server to the uploaded file
size – The size in bytes of the file
creationDate – The date the file was created
modificationDate – The last date the file was modified
type – The file extension beginning with a ‘.’
response: The data sent back from the server.
Now if your aspx image is like:
<aspx:image id="myImage"...../>
you can set it as follows:
//Uploadify hookup
'onComplete': function(evt, qid, fObj, res){
var f = fObj.filePath + fObj.name; //PUT SLASH IF REQUIRED BETWEEN
$("img[id$='myImage']").attr("src",f);
//for future readers who might be using master pages.
$('#<%=myImage.ClientID %>').attr("src", f);
$('#<%=txtMyImgPath.ClientID %>').val(f);
}

Resources