Download A File From Internet ( Music , Pictures ...)


#1

Well i have a button and i want as i clicked it, my app fetch the Url of my song or open it in the browser and start downloading.
And here is my code where u can find “download” button:

	<iOS.StatusBarConfig Style="Light" />

	<JavaScript>
		var cards = [
			{
				title: "Dast Bezan",
				description: "Awliye",
				artist: "Maziyar Falahi",
				artistPic: "Assets/maziyar.jpg",
				cover: "Assets/M1.jpg",
				albums: "4",
				topColor: "#cdb8b5",
				bottomColor: "#4f3250"
			},
			{
				title: "Baradar",
				description: "In chi mige",
				artist: "Mohamad Alizadeh",
				artistPic: "Assets/mohamad.jpg",
				cover: "Assets/M2.jpg",
				albums: "6",
				topColor: "#8dabe1",
				bottomColor: "#092759"
			},
			{
				title: "40 Darajeh",
				description: "Wow",
				artist: "Mohamad Alizadeh",
				artistPic: "Assets/mohamad.jpg",
				cover: "Assets/M3.jpeg",
				albums: "2",
				topColor: "#ffd181",
				bottomColor: "#7f2525"
			}
		];
		module.exports = {
			cards: cards
		};
	</JavaScript>

	<DockPanel>

		<StackPanel Dock="Top" Color="#0003">
			<StatusBarBackground />
			<Panel Height="56">
				<StackPanel Orientation="Horizontal" Alignment="CenterLeft" Margin="16" ItemSpacing="4">
					<Text Value="Free Musics" Alignment="Center" Color="#FFF" FontSize="18" />
				</StackPanel>
				<Text Value="7Bands" Alignment="Center" Color="#FFF" FontSize="20" />
				<Image File="Assets/star.png" Alignment="CenterRight" Margin="16"/>
			</Panel>
		</StackPanel>

		<PageControl ux:Name="cards" Padding="24,32,24,8">
			<Each Items="{cards}">
				<Card Title="{title}" Description="{description}" Artist="{artist}"
						ArtistPic="{artistPic}" Cover="{cover}" Albums="{albums}"
						TopColor="{topColor}" BottomColor="{bottomColor}">
					<WhileActive Threshold="0.5">
						<Set topColor.Value="{topColor}" />
						<Set bottomColor.Value="{bottomColor}" />
					</WhileActive>
				</Card>
				
			</Each>
		</PageControl>

		<StackPanel Layer="Background" Alignment="Bottom">
			<PageIndicator Height="56" Navigation="cards" Alignment="Center">
				<StackLayout ItemSpacing="12" Orientation="Horizontal" />
				<Panel ux:Template="Dot">
					<DeactivatingAnimation>
						<Scale Factor="0.8" />
						<Change indicator.Opacity="0.4" />
						<Rotate Degrees="360" />
					</DeactivatingAnimation>
					<Circle ux:Name="indicator" Width="12" Height="12" Color="#fff">
						<Rectangle Width="2" Height="7" Color="#0008" CornerRadius="1">
							<Translation Vector="-2,-2,0" />
							<Rotation Degrees="-45" />
						</Rectangle>
					</Circle>
				</Panel>
			</PageIndicator>
			<BottomBarBackground />
		</StackPanel>

	</DockPanel>

	<Attractor ux:Name="topColor" Target="colorTop.Color" Value="#cdb8b5" Type="Easing" Duration="0.2" DurationExp="0" />
	<Attractor ux:Name="bottomColor" Target="colorBottom.Color" Value="#4f3250" Type="Easing" Duration="0.2" DurationExp="0" />

	<Rectangle>
		<LinearGradient StartPoint="0,0" EndPoint="0,1" AngleDegrees="72">
			<GradientStop ux:Name="colorTop" Offset="0" />
			<GradientStop ux:Name="colorBottom" Offset="1" />
		</LinearGradient>
	</Rectangle>

</App>

#2

Hi JAvad_7,

to launch other apps (such as a browser), you can use LaunchUri. For downloading things in the background, there’s this library.


#3

Hi
First i thank you for the “LaunchUri” you mentioned.
but still don’t know how to include the lib you mentioned. so plz help me with that.


#4

The repository I linked to includes a README that explains how to use the library: https://github.com/fuse-compound/Fuse.BackgroundDownload#including-the-library


#5

hey again and thanks.
now i got this and know how to include this one.
tnx fuse team.
Problem is solved.


#6

Uldis,

Has something changed in the newer versions of Fuse, because this is not working.

I tried including the library, I tried running the example, but nothing actually happens.

I click the download button (from the example), it clams to start the download and then nothing…

For like 20 minutes nothing happens.

It’s supposed to provide information on the download, no? That does not happen.


#7

Hello,

Yes, something changed but it is now fixed. Please try again. Also, the download works only on device. You can use xcode simulator or a real android device to test.


#8

Hey guys!

I’m having a hard time to get it to work.

I copied the src folder in my project folder.

It now looks like this:

Next, I added it to the projects section in my unoproj file:

  "Projects": [
      "src/Fuse.BackgroundDownload.unoproj"
  ],

Also added the * in the includes (I could be wrong here):

  "Includes": [
    "Modules/*.js:Bundle",
    "Assets/*.jpg:Bundle",
    "*",
  ],

and added Allow backup under the Android section:

  "Android": {
      "AllowBackup" : true,
     "Geo": {
          "ApiKey": "asdasdasd"
      }
  }

Then in my code I added:

	var Downloader = require("FuseJS/BackgroundDownload");

	downloadID = Downloader.start("http://download.thinkbroadband.com/20MB.zip");

	Downloader.on("progress", function(downloadID, bytesSoFar, totalBytesExpected) {
	    console.log("Rock on " + downloadID + ": " + (bytesSoFar / totalBytesExpected));
	});


	Downloader.on("succeeded", function(kind, downloadID, finalPath) {
	    console.log(kind + " - " + downloadID + ": " + finalPath);
	});

But I get an error:

[Viewport]: Error: : Uncaught require(): module not found: FuseJS/BackgroundDownload
	In: Fuse.Scripting.DiagnosticSubject
	Fuse: MainView.ux:9

I tried the include path as:

./src
/src
src

but it just doesnt work.

I dont want to include it like in the example …/…/src as I dont think that’s a good practice if I want to deploy the app, you can correct me here.

What am I doing wrong?


#9

Hello.

module not found means you are not adding it correctly. It looks like you did so try entering uno clean in the terminal and recompile. If it does not work hit me up in Slack :slight_smile:


#10

I did uno clean, and Fuse for Mac no longer complains, but Fuse Preview still gives me the error that the module has not been found.
Suggestions?


#11

Update: Fuse preview does not work with this. I tried the iOS simulator / emulator and it works.

So for anyone in the future testing this out:

  1. Copy the settings from the .unoproj file in the example
  2. Fix the path to reflect your project
  3. Dont forget the android section
  4. Do an uno clean and uno build
  5. Use the emulator or actual device to test.

Best of luck.


#12

Ok, me again, I just realized, there’s something wrong with the saving part.

See the on succeeded console.log:

101 - /Users/me/Library/Developer/CoreSimulator/Devices/3E0CC33B-3DC5-4119-9429-105D9CA938BC/data/Containers/Data/Application/5E88BB1D-A729-46EA-BCAA-92A7FD9E9C7F/Library/Caches/com.apple.nsurlsessiond/Downloads/myapp/CFNetworkDownload_PSYosg.tmp: undefined

So, the final path is undefined?!?

It saves the temp file but why is it not saving the final path?


#13

Tested on actual device, same issue, final path is undefined?